JS限制文本框录入长度（支持字符限制）

最新推荐文章于 2023-04-10 17:39:17 发布

原创最新推荐文章于 2023-04-10 17:39:17 发布 · 8.8k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#function #输入法 #input

JS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了一个实用的JavaScript插件，该插件能够实现在网页表单中对输入框的文字数量进行限制，并能实时显示剩余可输入的字数。支持按字符数或字节数限制，适用于中文输入，且可在同一页面上应用多次。

功能/特点：

1.实时显示可输入的字数（字节数）

2.两种限制方式（长度、字节数）

3.中文输入法下可正常使用，无BUG

4.同一页面可以使用多个，相互不干扰

limit.js

function limit(){ var txtNote;//文本框 var txtLimit;//提示字数的input var limitCount;//限制的字数 var isbyte;//是否使用字节长度限制（1汉字=2字符） var txtlength;//到达限制时，字符串的长度 var txtByte; this.init=function(){ txtNote=this.txtNote; txtLimit=this.txtLimit; limitCount=this.limitCount; isbyte=this.isbyte; txtNote.onkeydown=function(){wordsLimit()};txtNote.onkeyup=function(){wordsLimit()}; txtLimit.value=limitCount; } function wordsLimit(){ var noteCount=0; if(isbyte){noteCount=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length}else{noteCount=txtNote.value.length} if(noteCount>limitCount){ if(isbyte){ txtNote.value=txtNote.value.substring(0,txtlength+Math.floor((limitCount-txtByte)/2)); txtByte=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length; txtLimit.value=limitCount-txtByte; }else{ txtNote.value=txtNote.value.substring(0,limitCount); txtLimit.value=0; } }else{ txtLimit.value=limitCount-noteCount; } txtlength=txtNote.value.length;//记录每次输入后的长度 txtByte=txtNote.value.replace(/[^/x00-/xff]/g,"xx").length; } }

页面调用：

<html> <body> <input id="txtNote" /> 还可输入<input type="text" id="txtCount" />个字符 </body> <mce:script type="text/javascript"></mce:script> </html>

评论 3

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符

添加红包

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

查看更多评论

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。