textarea不能通过maxlength属性来限制字数的解决方法


Posted in Javascript onSeptember 01, 2014

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>
Javascript 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
javascript Excel操作知识点
Apr 24 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
基于jquery的可多选的下拉列表框
Jul 20 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
javascript实现弹出层效果
Dec 10 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 #Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 #Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 #Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 #Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 #Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 #Javascript
仿百度联盟对联广告实现代码
Aug 30 #Javascript
You might like
php分页示例代码
2007/03/19 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
[JS]点出统计器
2020/10/11 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
js的写法基础分析
2011/01/17 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
2018/11/20 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
值得收藏的10道python 面试题
2019/04/15 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
简述 Python 的类和对象
2020/08/21 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
会计系中文个人求职信
2013/12/24 职场文书
班主任工作年限证明
2014/01/12 职场文书
班组拓展活动方案
2014/08/14 职场文书
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python