版本一

網上找的

promiseNum('#contnet', 10);function promiseNum(id, num) {$(id).bind("input propertychange", function () {var a = $(id).val();if (a.length > 10) {$(id).val($(id).val().substr(0,num));}});}

這種效果并沒有完全達到 maxLength 的效果，長度到達之后，它依然可以繼續輸入內容，然后截取指定長度內容

版本二

是我自己思考想出來的思路。
分別監聽keypress和 paste事件來做判斷處理
keypress是鍵盤按下事件，監聽輸入的字符串超過指定長度就不讓輸入了

$('#id').on('keypress', function () {if ($('#id').val().length > 10) {return false;}})

此時已經和 maxlength效果有點類似了，但是我們通過復制粘貼依然可以把內容給輸入進去，所以還需要監聽 粘貼事件

$('#fds2').on('paste', function () {// 1.獲取剪切板的內容var pastedData = e.originalEvent.clipboardData.getData('text/plain');// 2. 獲取輸入框的內容var inputValue = $('#fds2').val();//3.判斷粘貼的內容+輸入框內容總長度是否大于限制輸入的長度if(inputValue.length+ pastedData.length > 10){alert("內容已經達到最大限度,或復制內容過多")return false}})

思考：此時還沒有完全實現maxLength的效果，但是這已經是最佳的解決方案，因為maxLength屬性粘貼的時候它會自動根據輸入框剩余可輸入的內容長度來截取剪切板的內容進行填充，技術上可以輕易實現，但是 w3c 不允許，在IE中可以實現，chrome中不行，先看示例代碼

$('#fds2').on('paste', function () {// 1.獲取剪切板的內容var pastedData = e.originalEvent.clipboardData.getData('text/plain');// 2. 獲取輸入框的內容var inputValue = $('#fds2').val();//3.判斷內容是否已經超出最大限制長度,假設只能輸入10個字if(inputValue.length<10){ //還可以繼續填充內容//4.求出剩余可輸入的長度var allowLength = 10 - inputValue.length;//5.截取剪切板中的內容var allowContent = pastedData.substr(0,allowLength);//6.再把這部分內容賦值給剪切板（在IE中是有效果的...這么好用的api 可惜了）e.originalEvent.clipboardData.setData('text/plain',allowContent);}else{return false}})

拓展

這個思路，同樣可以用來限制一些富文本插件的最大輸入字符個數，因為富文本限制輸入

總結

以上是生活随笔為你收集整理的js模拟html5的maxLength效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。