实现textarea限制输入字数

摘要:
实现textarea以限制输入单词的数量textarea称为文本字段,也称为文本区域,即带有滚动条的多行文本输入控件,通常用于网页的提交表单中。常见的做法是使用#脚本语言来限制文本区域文本字段中的单词数,这既简单又实用。Onpropertychange可用于判断预定元素的值。当元素的值发生变化时,将触发判断事件。它只关心被监控元素的值,避免输入源,这样我们就可以实现理想的限制单词数量的目标。

实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)

textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制以达到预设的需求。

通常的做法就是使用#脚本语言来实现对textarea文本域的字数输入限制,简单而实用。假设我们有一个id为 txta1 的textarea文本区,我们可以通过以下代码限制它的键盘输入字数为10个字(汉字或其他小角字符):

<script language="#" type="text/ecmascript"> 
window.onload = function() 

document.getElementById('txta1').onkeydown = function() 
{    
    if(this.value.length >= 10) 
      event.returnValue = false; 


</script> 
它的原理是通过对keydown(键盘键位按下)事件对指定id号的文本区进行监测,可以想象,它只能限制键盘输入,如果用户通过鼠标右键粘贴剪切板中的文本,它无法控制字数。

通过键盘输入,以上文本区只能输入10个字。但是,我们的目的并没有达到!请随便复制一些文本,试着用鼠标右键粘贴,看看发生了什么。

你可以在网上找到类似上述的其他JS脚本,它们不管多么优秀,其原理都是一样的,通过对keydown、keyup或keypress之类的键盘键位操作事件来监控文本区的输入,无法防止鼠标右键的粘贴,为此,如果一定要真正地限制textarea的字数,我们还得为网页加另一把锁——禁用鼠标右键,这无疑得付出额外的开销,同时也可能是网页制作者不一定愿意做的。其实,还有一个更简单的方法,使用onpropertychange属性。

onpropertychange可以用来判断预定元素的value值,当元素的value值发生变化时判断事件就会被触发,仅关心被监测元素的value值,避开了输入的来源,从而可以比较理想地达成我们的限制字数这一目的。它属于JS范畴,可以在表单方框区代表中嵌套使用,以下是代码和效果样式,可以像上面那样测试输入,你会发现它真正达到目的:不管用什么方式输入,它只能输入100个字(汉字或其他小解符号):

代码:

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" cols="60" name="txta" rows="8"></textarea>


当然,为了更为保险,处理表单数据的后台脚本程序还应该对提交来的数据进行再一次的检测,如果字数超出预设的数量则进行相应处理,这样才达到真正限制字数的目的。(完)

另外一种方法实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个)

<script> 
function check() { 
var regC = /[^ -~]+/g; 
var regE = /D+/g; 
var str = t1.value; 

if (regC.test(str)){ 
    t1.value = t1.value.substr(0,10); 


if(regE.test(str)){ 
    t1.value = t1.value.substr(0,20); 


</script> 
<textarea maxlength="10" onkeyup="check();"> 
</textarea>

还有一种方式:

function textCounter(field, maxlimit) { 
if (field.value.length > maxlimit){ 
field.value = field.value.substring(0, maxlimit); 
}else{ 
document.upbook.remLen.value = maxlimit - field.value.length; 



<textarea name=words cols=19 rows=5 onPropertyChange= "textCounter(upbook.words, 50) "> textarea> 
剩余字数: <input name=remLen type=text value=50 size=3 maxlength=3 readonly>

function LimitTextArea(field){ 
    maxlimit=200; 
    if (field.value.length > maxlimit) 
     field.value = field.value.substring(0, maxlimit); 
       
   }

<textarea cols=50 rows=10 name="comment" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>

title="The textarea width must less than 300 characters." 放在textarea 里面提示输入最大字节数。

例如:<textarea title="The textarea width must less than 300 characters." cols=50 rows=10 name="comment" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>

从网上摘抄来的,希望对大家有帮助哦~~

原文地址:http://www.cnblogs.com/butterfly/archive/2009/04/27/1444598.html

免责声明:文章转载自《实现textarea限制输入字数》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇gitlab 启用HTTPSMSSQL锁定3.死锁与阻塞(myBased)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

文本框点击后文字消失总结

1.文本框显示默认文字: <textarea>白鸽男孩</textarea> <textarea>白鸽男孩</textarea>    2.鼠标点击文本框,默认文字消失: <textarea onfocus=”if(value==’白鸽男孩’) {value=’ ‘}”>白鸽男孩</text...

textarea 文本域标签 换行填写 无法正确回显

1、问题记录   在使用textarea标签的时候,发现在里面填写内容的时候,如果使用换行符,换行填写,再次修改回显的时候无法回显。或者无法正常换行显示 2、问题分析    当我们在前台的textarea框中录入数据的时候,按enter换行该换行符是“ ”,在进行读写的时候都是“ ”,而在前端HTML标签并不认识“ ”,所以必须得手动将其替换成为HTML认...

sencha touch textarea 手机上不显示滚动条,且不能滚动

最近在项目中发现 sencha touch 中的 textarea 在手机上不显示滚动条,也不能滚动。 在浏览器中之所以能显示滚动条滚动,那是浏览器为 textarea 添加的滚动条。 但在手机中是不会显示滚动条的。 可能在以后的版本中会有所改进吧。 于是只能另想办法了,找了一个老外重写的可滑动的 textarea (无滚动条)。 转: Ext.defin...

设置输入域(input/textarea)中文本光标的位置

以前记录了一篇 将光标定位于输入框最右侧的实现方式 ,实现光标定位在文本的最末。这种需求往往在修改现有的文本。有时可能还需要把光标定位在首位,或者中间某个位置,这就需要实现一个更通用的方法。 这个方法setCursorPosition需要使用两个原生API setSelectionRange createTextRange 原生JS实现 /* *...

Javascript----input事件实现动态监听textarea内容变化

1、代码 <!DOCTYPE html> <html> <head> <title>textarea输入文字监听</title> </head> <body> <textarea maxlength="50" style=" 400px; he...

textarea中文本高亮选中

  最近在实现原文/译文句段高亮对比显示,和有道翻译类似,如下图所示:    最初的解决方案是采用富文本编辑器,把所有句段信息都用HTML标签包裹,操作空间比较大,页面上需要的功能几乎都可以实现,但是由此带来了许多的弊端,比如:    1.复制文本存在原始格式    2.复制大量文本存在性能问题(富文本编辑器的通病,复制几十万文字的文本可能导致页面崩溃)...