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 相关文章推荐
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php中对2个数组相加的函数
2011/06/24 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
详解js跨域原理以及2种解决方案
2015/12/09 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
numpy添加新的维度:newaxis的方法
2018/08/02 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
python利用tkinter实现屏保
2019/07/30 Python
Django models文件模型变更错误解决
2020/05/11 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
《海底世界》教学反思
2014/04/16 职场文书
会计岗位说明书
2014/07/29 职场文书
精神病医院见习报告
2014/11/03 职场文书
长江三峡导游词
2015/01/31 职场文书
家访教师心得体会
2016/01/23 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技