国产视频apphtml 中 input 標簽的 value 值的長度理論上應該是 2^32(數據來源于資料,沒有測試過),但為了防止一些 input 的輸入數據過長來做一些限制,該如何實現呢?這篇文章就來介紹一下,如何限制 input 輸入數據的長度并且輸入的數據超過規定的長度該如何去提示?

html input 限制輸入字符串長度的方法

input 標簽中的 maxlength 屬性,可以用來規定輸入字符串的最大長度。

示例代碼:

<!--這里最多可以輸入20個字符-->
<input type="text" maxlength="20">

html input 限制輸入字符串的長度并提示的方法

国产视频appmaxlength 屬性雖然可以限制 input 輸入字符串的長度,但對于用戶的體驗來說是很不友好的,所以我們要利用 js 代碼在 input 輸入的字符超過規定的長度時給出提示!

jq示例代碼:

<input type="text" id="inputs" maxlength="10">
<script>
    $('#inputs').on('input propertychange',function(){
        var num,le;
        num = $(this).val().length;
        le = parseInt($(this).attr('maxlength'))-1; // 這里是獲取的 maxlength 屬性的值
        if (num > le) {
            alert('長度超過限制!');
        }
    })
</script>

注意:

国产视频app1、上面 js 代碼中 le 變量規定的限制長度要比實際中少一位(減去一個1),不然不會觸發判斷邏輯

国产视频app2、js 中 le 變量獲取的是 maxlength 屬性的值,如不想獲取此屬性的值,可以自定義!

3、使用上面的 js 代碼前,要加載 jquery.js 文件!

原生 js 代碼示例

<input type=text  onkeypress="keyPress(this)" maxlength="10" >
<script>
    function keyPress(ob) {
        //這里比較時,要比實際的限制數量少一位才會觸發判斷邏輯!
        if(ob.value.length > 9){
            alert('長度超過限制啦!');
        }
    }
</script>