开发者社区> 技术mix呢> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

超级简单:在一个TextArea中如何限制行数和字符数

简介:
+关注继续查看

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

 

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

例子:

 

TextArea的定义:

 

代码

 

 

Attributes

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

Style properties

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

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

line-height我们必须设置TextArealine-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字符数和行数实际数量和最大数量。

 

代码

 

代码:

 

<script type="text/javascript">
<!--

 函数getLines函数checkLimits调用来计算在TextArea使用的行数。变量lineHeight被设置成我们TextArea的样式属性line-height的数量值。变量tr代表我们TextArea的文本,由bounding properties持有它的尺寸大小。我们将boundingHeight除以lineHeight来得到我们文本占有的行的数量。

 

function getLines(txtArea){
  
var lineHeight = parseInt(txtArea.style.lineHeight.replace(/px/i,''));  
  
var tr = txtArea.createTextRange();
  
return Math.ceil(tr.boundingHeight/lineHeight);
}

 主函数checkLimits带三个参数,它将被这些事件调用:body.onloadtextarea.onKeyUptextarea.onCuttextarea.onPastetextarea.onBlur:

 

代码

 在这个例子中,maxLinesmaxChars的值来源于TextArea的可见大小,但是我们也可以选择任何一个适当的值。我们设置统计的countCharstxtArea.alue的长度,countLines为函数getLines(txtArea)的返回值。在页面的myForm.myCharsmyForm.myLines上显示它们。我们也在页面上显示行数和字符数的限制值。

 

代码

 首先,我们检查是否maxChars 或者  maxLines的限制是否达到。用户输入一新行时,在这个情况下,我们必须要缩短文本区内容,直到超出限制,通过弹出提示框,中断进一步输入。

代码

 如果输入了字符数量超过了最大允许数量,TestArea的长度会自动减少到txtArea的数量,会弹出提示框。

代码

 

同样,如果文本超过了行数的限制。也会自动减少直到等于maxLines,弹出提示框。有一件事情必须说起,限制的检查在input处理完之后,因此,片刻,一个垂直的scrollbar在会显示在浏览器上。最后一行会减少一些多余的字符。为了避免输入的丢失,我们设置txtAreaHeight为((rows + 1) * lineHeight).

代码

 

最后,统计更新。

 

  countChars.value = txtArea.value.length; 
  countLines.value 
= getLines(txtArea); 
//--> 
</script>

 

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

 代码: /Files/zhuqil/TALimit_demo.zip

 原文:http://www.codeproject.com/KB/scripting/TALimit.aspx

 





本文转自麒麟博客园博客,原文链接:http://www.cnblogs.com/zhuqil/archive/2009/12/21/1628530.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
编写Java程序,实现一个简单的echo程序(网络编程TCP实践练习)
编写Java程序,实现一个简单的echo程序(网络编程TCP实践练习)
104 0
自动获取计算机名、用户名、IP地址、子网掩码和默认网关
本单位有很多计算机设备(成千上万),现需要统计计算机名、用户名、MAC地址、IP地址、默认网关、子网掩码信息,咋办捏。
109 0
A*算法之在U3d下实现简单的自动寻路
算法简介: A搜寻算法俗称A星算法。A算法是比较流行的启发式搜索算法之一,被广泛应用于路径优化领域[。它的独特之处是检查最短路径中每个可能的节点时引入了全局信息,对当前节点距终点的距离做出估计,并作为评价该节点处于最短路线上的可能性的量度。
1159 0
一款基于RxJava2+Retrofit2实现简单易用的网络请求框架
本库是一款基于RxJava2+Retrofit2实现简单易用的网络请求框架,结合android平台特性的网络封装库,采用api链式调用一点到底,集成cookie管理,多种缓存模式,极简https配置,上传下载进度显示,请求错误自动重试,请求携带token、时间戳、签名sign动态配置,自动登录成功后请求重发功能,3种层次的参数设置默认全局局部,默认标准ApiResult同时可以支持自定义的数据结构,已经能满足现在的大部分网络请求。
2463 0
SAP WM LP10 创建TO单据的时候,系统根据目的地100下的库存自动扣减TO里的数量?
SAP WM LP10 创建TO单据的时候,系统根据目的地Storage Type 100下的库存自动扣减TO里的数量   LP10将TR转成TO单据的时候,我们常常发现,生成的TO单据里的数量并不是等于TR里的数量,而是系统自动根据目的地storage type 100下的库存数量自动扣减之后的数量作为生成的TO的数量。
1334 0
+关注
2968
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载