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 相关文章推荐
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
详解Vue的列表渲染
Nov 20 Vue.js
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中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
Python实现的二维码生成小软件
2014/07/11 Python
独特的python循环语句
2016/11/20 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
pandas中Timestamp类用法详解
2017/12/11 Python
基于Python log 的正确打开方式
2018/04/28 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Python 用三行代码提取PDF表格数据
2019/10/13 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
python logging模块的使用
2020/09/07 Python
python判断变量是否为列表的方法
2020/09/17 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
物流合作计划书
2014/01/10 职场文书
学生打架检讨书大全
2014/01/23 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
起诉状范本
2015/05/20 职场文书
养成教育工作总结
2015/08/13 职场文书
周一问候语大全
2015/11/10 职场文书
导游词之上海豫园
2019/10/24 职场文书
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android