2019独角兽企业重金招聘Python工程师标准>>>

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>

从网上摘抄来的,希望对大家有帮助哦~~

转载于:https://my.oschina.net/lovelong1/blog/213811

实现textarea限制输入字数相关推荐

  1. texearea 限制字数_实现textarea限制输入字数

    实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框t ...

  2. textarea html5限制字数,textarea文字输入字数限制

    textarea文字输入字数限制,不超300 300 function checkLen(obj) { var maxChars = 300;//最多字符数 if (obj.value.length  ...

  3. texearea 限制字数_js实现textarea限制输入字数

    实现textarea限制输入字数(包含中文只能输入10个,全ASCII码能够输入20个) textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框t ...

  4. html 实时计算字数,JavaScript 实现textarea限制输入字数, 输入框字数实时统计更新,输入框实时字数计算移动端bug解决...

    textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...

  5. JavaScript 实现textarea限制输入字数, 输入框字数实时统计更新,输入框实时字数计算移动端bug解决...

    textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同,它不能通过maxlength属性来限制字数,为此必须寻求其他方法来加以限制 ...

  6. element ui textarea实现输入字数统计

    背景 最近看同行设计,input textarea如果限制字符,可以展示已输入多少个字符,总共限制多少个字符.觉得这个设计挺好,看了一下element官方文档,也可以这么实现. 具体实现 maxlen ...

  7. texearea 限制字数_限制textarea的输入字数

    今天接到任务的第一个需求是限制字数,查看了一下之前人留下来的代码,使用的是textarea,于是就想当然的用了maxlength,结果发现无用.查阅得知,原来textarea对于maxlength的支 ...

  8. php textarea 默认值,html中的textarea属性大全(设置默认值 高度自适应 获取内容 限制输入字数 placeholder)...

    1.textarea设置默认值 HTML: 此段代码设置一个textarea文本框 并且设置为隐藏 2.textarea高度自适应 今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框 ...

  9. textarea输入框限制字数(JS)

    第一种: <textarea οnkeyup="checkLen(this)"></textarea> <div>您还可以输入 <span ...

最新文章

  1. Visual Studio 2017 第三方依赖设置,附加依赖项和附加库目录
  2. Tableau系列之圆环图制作
  3. Java exception handling best practices--转载
  4. TFboys:使用Tensorflow搭建深层网络分类器
  5. FL2440的U-boot-2009.08移植(三)支持Nor FLASH
  6. gettype获取类名_delphi – 获取属于任何类型的单元名称(TRttiType)
  7. Spring Boot与Activiti集成实战
  8. 终端 ssh 上传文件_记一次将文件添加到github
  9. WP中Document的层次设计
  10. 使用PLSQL导出oracle表结构,表数据;导入数据
  11. 显控触摸屏编程手册_深圳显控AKWORKSHOP触摸屏与ALLENBRADLEY通讯手册.pdf
  12. 英语四级备考~自我总结
  13. Mysql中有关Datetime和Timestamp的使用总结
  14. 阿里小蜜:语音识别、语义分析、深度学习在手机淘宝的实战分享
  15. 代码打累了看看短腿基!
  16. OpenWrt 一个关于IPv6巨傻X的设置项
  17. 美国高防服务器亿速云,亿速云香港高防裸金属服务器上线,更强悍的计算性能,更安全的DDoS攻击防护...
  18. 用搜狗输入法原样输出10的若干次方
  19. iOS10新特性——————陈Hong鑫
  20. android投屏小米电视软件,小米投屏神器安卓版

热门文章

  1. URI 和 URL 的区别
  2. Redis集群搭建使用
  3. linux红黑树节点没有数据,真正理解红黑树,真正的(Linux内核里大量用到的数据 -电脑资料...
  4. java获取panel面板画笔_java - paintComponent()与paint()和JPanel vs Canvas在画笔类型的GUI中 - 堆栈内存溢出...
  5. java wps linux 安装_ubuntu安装Java开发环境
  6. 操作对象_DOM进阶——HTML属性操作(对象属性)
  7. 金三银四!你想好转行产品经理了吗?
  8. 京东数据产品专家分享“如何转行数据产品经理​?”
  9. input type类型_设备树下的input子系统
  10. 洛谷P1307题解(Java语言描述)