js限制文本框输入长度两种限制方式(长度、字节数)

39 浏览量 2020-10-27 19:50:28 上传评论收藏 51KB PDF 举报

在JavaScript中，限制文本框（`<input type="text">`）输入长度是常见的需求，尤其是在表单验证或用户输入控制的场景。本篇将详细解释两种限制文本框输入长度的方法，包括字符长度和字节数限制，并提供相关示例代码。 ### 1. 字符长度限制字符长度限制是最直观的方式，即限制用户输入的最大字符数量。在JavaScript中，可以通过监听`onkeydown`和`onkeyup`事件来实现。以下是一个简单的示例： ```html <html> <body> <input id="txtNote" /> 还可输入<input type="text" id="txtCount" />个字符 </body> <script type="text/javascript"> function limit() { var txtNote = document.getElementById("txtNote"); var txtLimit = document.getElementById("txtCount"); var limitCount = 20; txtNote.onkeydown = function() { wordsLimit() }; txtNote.onkeyup = function() { wordsLimit() }; function wordsLimit() { var noteCount = txtNote.value.length; if (noteCount > limitCount) { txtNote.value = txtNote.value.substring(0, limitCount); txtLimit.value = 0; } else { txtLimit.value = limitCount - noteCount; } } } var lim = new limit(); lim.init(); </script> </html> ``` 在这个例子中，当用户在文本框`txtNote`中输入时，`wordsLimit`函数会被调用，实时更新剩余可输入的字符数并限制输入长度不超过20个字符。 ### 2. 字节数限制对于包含中文等多字节字符的情况，有时需要按字节数来限制输入。一个汉字通常占用2个字节，英文字符则占1个字节。以下是一个考虑字节数限制的例子： ```html <html> <body> <input id="txtNote" /> 还可输入<input type="text" id="txtCount" />个字节 </body> <script type="text/javascript"> function limit() { var txtNote = document.getElementById("txtNote"); var txtLimit = document.getElementById("txtCount"); var limitCount = 40; var isbyte = true; txtNote.onkeydown = function() { wordsLimit() }; txtNote.onkeyup = function() { wordsLimit() }; function wordsLimit() { var noteCount = txtNote.value.replace(/[^\x00-\xff]/g, "xx").length; var txtlength = 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; } } var lim = new limit(); lim.init(); </script> </html> ``` 这个例子中，通过正则表达式`/[^\x00-\xff]/g`匹配非ASCII字符，并用`xx`替换，从而计算出多字节字符对应的字节数。 ### 注意事项 - 在中文输入法下，确保输入的字符长度计算正确，防止出现BUG。 - 当页面中有多个文本框需要限制时，每个文本框都需要独立处理，确保它们之间互不干扰。 - 对于某些特定需求，如必须输入指定数量的字符或字节，可以在输入时进行即时验证，如上述示例中的`maxLength`属性。 ### 解决方案对于只允许输入数字且长度固定的文本框，可以使用HTML5的`pattern`属性或者JavaScript事件监听来实现： ```html <INPUT pattern="\d{11}" maxLength=11 required> ``` 或者 ```html <INPUT onkeydown="if(event.keyCode==13)event.keyCode=9" onkeyup="this.value=this.value.replace(/[^0-9]/g,'');" maxLength=11 required> ``` 这将确保用户只能输入11位数字，且必须输入满11位。通过这些方法，开发者可以根据实际需求灵活地限制文本框的输入长度，无论是字符数还是字节数，都可以实现有效的控制。

资源推荐

资源详情

资源评论