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 相关文章推荐
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
javascript中的onkeyup和onkeydown区别介绍
Apr 28 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
JS删除对象中某一属性案例详解
Sep 08 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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
jQuery 连续列表实现代码
2009/12/21 Javascript
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
JS立即执行的匿名函数用法分析
2019/11/04 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
python读取Android permission文件
2013/11/01 Python
python绘图库Matplotlib的安装
2014/07/03 Python
python将ip地址转换成整数的方法
2015/03/17 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
电子信息专业学生自荐信
2013/11/09 职场文书
简历里的自我评价
2014/01/31 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
土建工程师岗位职责
2014/06/10 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
MongoDB数据库之添删改查
2022/04/26 MongoDB