js实现textarea限制输入字数
实现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)" class="smallArea" 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" id="t1" 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 class=input1 onPropertyChange= "textCounter(upbook.words, 50) "> textarea>
剩余字数:
<input name=remLen type=text id= "remLen " style= "background-color: #D4D0C8; border: 0; color: red " 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" id="commentarea" 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" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>
原文链接:http://www.qdfuns.com/notes/38951/527d7f31bfb2cba0badb1c4be4e94772.html
(资源库 www.zyku.net)
您可能感兴趣的文章
- 03-13textarea中写提示性文字的方法
- 09-07javaScript实现世界各地时间显示
- 05-19javascript实现获取中文汉字拼音首字母
- 05-10javascript实现单张或多张图片持续无缝滚动
- 08-10javascript实现汉字转拼音代码实例
- 07-07使用JavaScript实现alert的实例代码
- 07-07Textarea输入字数限制实例(兼容iOS&安卓)
- 07-04JavaScript中三个等号和两个等号你了解多少
- 05-31Javascript创建类和对象详解
- 04-25JavaScript中 DOM操作方法小结
- 09-27华为p50什么时候上市
- 01-12动感相册-动感相册应用软件功能介绍
- 02-27帝国CMS会员中心的短信息列表每页显示
- 11-24钉钉怎么查看行程卡
- 03-31python 实现图与图之间的间距调整subp
- 11-08荣耀X30max如何设置分屏
- 09-18iPhone换机vivo手机教程分享
- 01-30vivoy52s返回键图标样式修改方法
- 09-12oppo手机如何快速截图
- 01-12恒达教育-恒达教育应用软件功能介绍
最近更新
阅读排行
猜你喜欢
- 03-05opporeno6取消指纹解锁振动方法
- 05-08phpStudy 80端口被占用,占用进程为Syst
- 01-28红米k30设置人脸识别解锁方式
- 12-26女神动漫壁纸-女神动漫壁纸应用软件功
- 09-13真我GTNeo2怎么设置消息提醒
- 03-31Django 聚合函数的具体使用
- 02-21一加9取消锁屏下拉通知栏设置方法
- 02-08python spilt()分隔字符串的实现示例
- 04-01华为手机智能充电模式开启方法
- 01-28一加8t更改闹钟铃声步骤