在网上,已经有很多关于在一个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的宽度,而不是由浏览器自动换行。

textarea 行数限制_在一个TextArea中如何限制行数和字符数相关推荐

  1. 文件系统中文件的最长(字符数)绝对路径 Longest Absolute File Path

    为什么80%的码农都做不了架构师?>>>    问题: Suppose we abstract our file system by a string in the followin ...

  2. 【转】android 中如何限制 EditText 最大输入字符数

    原文网址:http://blog.csdn.net/fulinwsuafcie/article/details/7437768 方法一: 在 xml 文件中设置文本编辑框属性作字符数限制 如:andr ...

  3. android edittext最多输入,android 中如何限制 EditText 最大输入字符数

    方法一: 在 xml 文件中设置文本编辑框属性作字符数限制 如:android:maxLength="10" 即限制最大输入字符个数为10 方法二: 在代码中使用InputFilt ...

  4. android 中如何限制 EditText 最大输入字符数

    方法一: 在 xml 文件中设置文本编辑框属性作字符数限制 如:android:maxLength="10" 即限制最大输入字符个数为10 方法二: 在代码中使用InputFilt ...

  5. textarea 显示纯文本_显示textarea内容

    超级简单:在一个TextArea中如何限制行数和字符数 在网上,已经有很多关于在一个textbox限制允许的字符数量.但是如果需要,在textbox中如何去统计和限制行数呢.这里有一个解决方案,使用客 ...

  6. 命令逐行显示_在LoadRunner中执行命令行程序之:popen()取代system()

    >>>推荐阅读<<< 1.性能测试学习笔记-场景设计 2.性能测试的重要意义 3.性能分析流程及方法 4.应用系统性能调优之性能分析 在LoadRunner中执行命 ...

  7. java中批次号_在一个批次中插入多笔记录的几种方法

    插入数据库方法很多,下面Insus.NET列举几种方法,看看你常用的是哪一种: 创建一张表: CREATE TABLE [dbo].[Network_Info] ( [ID] INT NOT NULL ...

  8. nodejs命令行执行程序_在NodeJS中编写命令行应用程序

    nodejs命令行执行程序 by Peter Benjamin 彼得·本杰明(Peter Benjamin) 在NodeJS中编写命令行应用程序 (Writing Command-Line Appli ...

  9. python dataframe遍历_对Python中DataFrame按照行遍历的方法

    对Python中DataFrame按照行遍历的方法 在做分类模型时候,需要在DataFrame中按照行获取数据以便于进行训练和测试. import pandas as pd dict=[[1,2,3, ...

最新文章

  1. 导师神总结:读博失败的10个作死大法
  2. Tools下的mdscongiguer 文件中 43行 oracle 配置 发现需要连接库 -lclntsh libclntsh.so 库是个什么东西呢?...
  3. 在路上,继续就好了。。。。
  4. 为什么使用1 * 1 的卷积核
  5. 机器学习之朴素贝叶斯法
  6. 一个资深老司机告诉你选车的秘密 (完全版)
  7. JAVA面试题 + 答案
  8. cv mat 灰度值和_c++ 访问OpenCV中灰度图像的像素值
  9. cygwin不支持__malloc_hook
  10. 销售联系客户 需要技巧
  11. matlab动态电路仿真,matlab电路仿真教程
  12. 个人设想中的TCAX GUI生成的带python脚本代码的ASS字幕文件
  13. 计算机 控制面板都打不开怎么办,控制面板打不开怎么办?控制面板打开办法大全...
  14. numpy的array_equal函数
  15. 《毕业生》系列之二 有缘无分的群硕
  16. 海外社交媒体最佳图片尺寸
  17. 天道酬勤~我如此惬意
  18. 西部数据将旗下绿盘系列产品归入为蓝盘系列产品
  19. 【DBC专题】-4-DBC文件中的Signal信号字节顺序Motorola和Intel介绍
  20. 【转】Mac 下钥匙串不能授权访问怎么解决--不错

热门文章

  1. matlab裂纹扩展程序,SMART裂纹扩展实例讲解
  2. 树根 Digital root
  3. centos 安装中文字体库
  4. 给员工们制作了一个抽奖程序
  5. Google Earth Engine(GEE)分析多个地区的植被覆盖趋势
  6. 计算机的准确性的测量标准,GB/T 30975-2014
  7. java 静态数组_java(四)创建静态数组
  8. android平台上的移动SNS(一)
  9. 华为C8812E刷为MIUI总结
  10. 数据结构与算法weeks05