css textarea行数_超级简单：在一个TextArea中如何限制行数和字符数

阅读: 1586 评论: 13 作者: 麒麟发表于 2009-12-21 09:00 原文链接

在网上，已经有很多关于在一个textbox限制允许的字符数量。但是如果需要，在textbox中如何去统计和限制行数呢。这里有一个解决方案，使用客户端的Javascript去限制TextArea的内容为指定的字符数量和指定的行数(不一定就等于TextArea中可见的行数)。

我们能通过使用cols和rows 属性或者width和height样式属性，定义可见的宽度和高度，但是我们不能通过使用HTML或者CSS限制字符数量或者文本的行数。幸运的是我们能为TextArea的内容创建一个textRange对象。这个JavaScript对象有一个只读的boundingHeight属性，通过它我们能够检索出textRange的高度的像素值。因此，我们只要将textRange的高度除以TextArea的lineHeight(像素值)，就能得到TextArea使用的行数。

例子：

TextArea的定义：

代码

Text in the limited

textarea may never exceed the defined maximum number of rows and/or characters.

Attributes：

我们分配name和id给我们的TextArea，我们定义它可见的大小(rows和cols)。建议设置wrap属性为"virtual" 或者 "physical" 或者 "hard",但是不要设置为"off"。

Style properties：

font-family:我们能使用我们可能会使用比例字体(如Arial)或等宽字体(如Courier)。第一种情况，我们反而会达到字符数限制。第二种情况，我们最可能达到行数的限制。

font-size:在没有scrollbar情况下，如果我们希望显示允许的所有行，我们知道font-size，选择一个适当的line-height ，来计算TextArea的高度。

line-height:我们必须设置TextArea的line-height为一像素值,与给出的font-size相对应。

height: 在没有scrollbar情况下，如果我们想要显示所有的行，我们不得不设置height至少为(rows*line-height)+(line-height/2)。但我们可以很自由忽略这个属性，选择任何其他的适合的高度。

Event handlers：

onKeyUp：一个主要的事件来处理，当有文本输入或者使用键盘删除的时候，调用checkLimits脚本来检查TextArea的限制条件。

onPaste 和 onCut：但文本被粘贴到TextArea或者删除时调用脚本checkLimits.

onBlur当TextArea失去焦点的时候，做最后一次检查。

将能非常自由的使用其他的事件处理：例如onKeyPress等等，这取决于你的应用程序的需要。TextArea可能是空值或者包含了一些默认的文本，就像例子中显示的一样。

这个例子页面时包含了四个input来显示TextArea字符数和行数实际数量和最大数量。

代码

代码：

这些代码只在IE7.0中测试过。在一些情况下，限制行的数量也是必须的。例如，当文本存入数据库字段的时候，我们要统计字符的数量。进一步，我们利用boundingwidth限制TextArea的宽度，而不是由浏览器自动换行。

css textarea行数_超级简单：在一个TextArea中如何限制行数和字符数相关推荐

python面向过程实践汉诺塔_递归汉诺塔-和递归汉诺塔相关的内容-阿里云开发者社区...
多柱汉诺塔最优算法设计探究多柱汉诺塔最优算法设计探究引言汉诺塔算法一直是算法设计科目的最具代表性的研究问题,本文关注于如何设计多柱汉诺塔最优算法的探究.最简单的汉诺塔是三个柱子(A.B.C),因 ...
tableau三轴合并_《Tableau数据可视化实战》——1.12节合并不同数据源-阿里云开发者社区...
本节书摘来自华章社区<Tableau数据可视化实战>一书中的第1章,第1.12节合并不同数据源,作者(美)Ashutosh Nandeshwar,更多章节内容可以访问云栖社区"华 ...
阿里云服务器搭建python web环境_《Python入门》Linux 下 Python Web开发环境搭建笔记-阿里云开发者社区...
之前写过 Windows 7下Python Web开发环境搭建笔记,今天写一下在Linux系统下搭建Python Web的开发测试环境. 我使用的系统是:ubuntu 14.04 server,根据个 ...
python简单体育竞技模拟_Python程序设计思维练习---体育竞技分析-阿里云开发者社区...
体育竞技分析:模拟N场比赛计算思维:抽象 + 自动化模拟:抽象比赛过程,自动模拟N场比赛,当N越大时,比赛结果分析越科学. 本次比赛规则:回合制,15分一局,先由一方发球,如胜利,则得1分并继续发 ...
flutter能开发游戏吗_不用 H5，闲鱼 Flutter 如何玩转小游戏？-阿里云开发者社区...
什么是Candy引擎? Candy 是闲鱼技术团队设计开发的一款引擎: APP嵌入式的.轻量级的.易于开发.性能稳定的互动引擎: 绘制系统高度融合Flutter体系,游戏场景和Flutter UI支持 ...
redis 哨兵异步_突破Java面试(23-8) - Redis哨兵主备切换的数据丢失问题-阿里云开发者社区...
1 数据丢失的两个场景主备切换的过程,可能会导致数据丢失 1.1 异步复制由于 master => slave的复制是异步的,所以可能有部分数据还没复制到slave,master就宕机,于是 ...
钉钉微应用怎么进入_钉钉微应用如何打开本地app （Android）-问答-阿里云开发者社区-阿里云...
老李归来 2016-01-28 10:14:09 Re钉钉微应用如何打开本地app (Android)经测试,免登认证已成功,执行 dd.device.launcher.checkInstalledA ...
python中用于绘制各种图形、标注文本_在python中的图形上绘制常量文本-问答-阿里云开发者社区-阿里云...
我确定我可能在问一个愚蠢的问题,但找不到与我相同的问题. 我的朋友帮我写了一段代码,分析给出的数据并用趋势线将其绘制出来,我想在图的右上方添加一行文本,并在图上打印出其他内容,以表明它是什么文件(在代 ...
oss子账号_【最佳实践】授权子账号进行OSS图片样式设置-阿里云开发者社区
1.引子:如何授权子账号在控制台针对指定的Bucket设置图片样式呢? [使用场景]:某企业内部有众多Bucket,并且不同的Bucket分别指定了Bucket的管理员.目前Bucket A的管理员期 ...
mysql double 存储_关于MYSQL中FLOAT和DOUBLE类型的存储-阿里云开发者社区
关于MYSQL中FLOAT和DOUBLE类型的存储重庆八怪 2016-04-12 844浏览量简介: 关于MYSQL中FLOAT和DOUBLE类型的存储其实在单精度和双精度浮点类型存储中其存储方 ...

css textarea行数_超级简单：在一个TextArea中如何限制行数和字符数

css textarea行数_超级简单：在一个TextArea中如何限制行数和字符数相关推荐

最新文章

热门文章