js实现textarea限制输入字数


Posted in Javascript onFebruary 13, 2017

实现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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript 验证浏览器是否支持javascript的方法小结
May 17 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
ES6中Class类的静态方法实例小结
Oct 28 Javascript
每周一练 之 数据结构与算法(Stack)
Apr 16 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 Javascript
如何在JavaScript中创建具有多个空格的字符串?
Feb 23 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 Javascript
Canvas实现动态的雪花效果
Feb 13 #Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 #Javascript
Bootstrap选项卡学习笔记分享
Feb 13 #Javascript
jQuery Ajax全解析
Feb 13 #Javascript
jQuery中 bind的用法简单介绍
Feb 13 #Javascript
jquery实现轮播图效果
Feb 13 #Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 #Javascript
You might like
php 购物车实例(申精)
2009/05/11 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
5 cool javascript apps
2007/03/24 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
JavaScript 的继承
2011/10/01 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
vue.js 添加 fastclick的支持方法
2018/08/28 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
如何打开WebSphere远程debug
2014/10/10 面试题
优秀员工自荐书范文
2013/12/08 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
机关会计岗位职责
2014/04/08 职场文书
读书小明星事迹材料
2014/05/03 职场文书
学校课外活动总结
2014/05/08 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL