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 相关文章推荐
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
360doc网站不登录就无法复制内容的解决方法
Jan 27 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 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像数组一样存取和修改字符串字符
2014/03/21 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
Python学习笔记之解析json的方法分析
2017/04/21 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
如何手工释放资源
2013/12/15 面试题
服装设计行业个人的自我评价
2013/12/20 职场文书
校本教研活动总结
2014/07/01 职场文书
市场部岗位职责
2015/02/12 职场文书
实习证明格式范文
2015/06/16 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书