限制輸入類型號中的字符數

Question

我試圖將輸入中的字符（數字類型）限制為 X 編號。 我嘗試了很多選擇，但似乎都不起作用。 我不想使用選項 tel，因為它需要移動設備上的數字鍵盤（是的，帶有 . 和所有符號）我也嘗試了模式解決方案，但它僅適用於 iOS，不適用於 android（顯示正常鍵盤）。

最好的方法是，如果用戶達到限制，不要再讓他輸入，如果他想突出顯示文本並重新輸入他允許的不同數字。 只是不要讓他輸入超過指定數量的字符。

因此，任何幫助表示贊賞。

Answer 1

注意： charCode是非標准的並且不推薦使用，而keyCode只是不推薦使用。

檢查此代碼

JavaScript

<script>
function check(e,value)
{
    //Check Charater
    var unicode=e.charCode? e.charCode : e.keyCode;
    if (value.indexOf(".") != -1)if( unicode == 46 )return false;
    if (unicode!=8)if((unicode<48||unicode>57)&&unicode!=46)return false;
}
function checkLength()
{
    var fieldLength = document.getElementById('txtF').value.length;
    //Suppose u want 4 number of character
    if(fieldLength <= 4){
        return true;
    }
    else
    {
        var str = document.getElementById('txtF').value;
        str = str.substring(0, str.length - 1);
        document.getElementById('txtF').value = str;
    }
}

和下面帶有number類型的 HTML input

onInput //Is fired also if value change from the side arrows of field in Chrome browser

<input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength()" />

小提琴演示

更新——一點點通用代碼示例

把上面的函數改成這個

function checkLength(len,ele){
  var fieldLength = ele.value.length;
  if(fieldLength <= len){
    return true;
  }
  else
  {
    var str = ele.value;
    str = str.substring(0, str.length - 1);
    ele.value = str;
  }
}

在 HTML 中像這樣使用

<!-- length 4 -->    
<input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength(4,this)" />
<!-- length 5 -->    
<input  type="number" onKeyPress="return check(event,value)" onInput="checkLength(5,this)" />
<!-- length 2 -->    
<input  type="number" onKeyPress="return check(event,value)" onInput="checkLength(2,this)" />

演示

Answer 2

另一種選擇 - tel輸入類型遵守maxlength和size屬性。

<input type="tel" size="2" maxlength="2" />

 <input type="tel" size="10" maxlength="2" />

Answer 3

可能會有用。

這是輸入患者年齡的字段。 它只允許輸入 3 個數字。

HTML

<input autocomplete="off" class="form-control"  id="Patient_Age" max="150" maxlength="3" name="PatientAge" placeholder="Age" size="3" type="number" value="0">

JS

<script>
    $(function () {         
        $("#Patient_Age").keydown(function (e) {
            // Allow: backspace, delete, tab, escape, enter  
            if ($(this).val().length <= 2 || $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
                // Allow: Ctrl+A
                // (e.keyCode == 65 && e.ctrlKey === true) ||
                // Allow: home, end, left, right
                (e.keyCode >= 35 && e.keyCode <= 39)) {
                // let it happen, don't do anything
                return;
            }
            else {
                event.preventDefault();
            }
            // Ensure that it is a number and stop the keypress
            if ($(this).val().length <= 2 || (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
            else {
                event.preventDefault();
            }
        });
    }); // end of $

</script>

Answer 4

HTML5 number類型輸入具有min和max屬性。

如果您想將字符數限制為 1，您可以設置最小值為 0，最大值為 9。

您還可以設置step屬性，默認情況下為 1，但如果您希望能夠選擇小數或其他四舍五入的數字，則可以使用該屬性。

<input type="number" maxlength="1" max="9" min="1" size="1" />

這是完整的演示

Answer 5

請查看此代碼

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
    if (limitField.value.length > limitNum) {
        limitField.value = limitField.value.substring(0, limitNum);
    } else {
        limitCount.value = limitNum - limitField.value.length;
    }
}
</script>

<form name="myform">
<input name="limitedtextfield" type="text" onKeyDown="limitText(this.form.limitedtextfield,this.form.countdown,15);" 
onKeyUp="limitText(this.form.limitedtextfield,this.form.countdown,15);" maxlength="15"><br>
<font size="1">(Maximum characters: 15)<br>
You have <input readonly type="text" name="countdown" size="3" value="15"> characters left.</font>
</form>

Answer 6

我認為這需要 onkeyup 事件處理程序。

使用此處理程序繼續輸入數字，直到遇到 5 個 keyup。 在此之后，不要讓要輸入的數字返回 0，除非按下的鍵是退格鍵或刪除鍵。

Answer 7

你可以試試這個 jQuery 代碼：

在 HTML 中

<input type="number" id="number" />

在JS中

$(document).ready(function () {
    var element = document.getElementById('number');

    $("#number").keydown(function (event) {
        // Allow only backspace and delete

        if($(this).val().length <= 9 || event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 )
        {
            if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) {
                // let it happen, don't do anything
            } else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                }
            }
        }else{

            event.preventDefault();
        }          

    });


});

我不知道它是否適用於 IOS N Android 但它適用於所有瀏覽器。

演示

Answer 8

對於十進制值，假設“25.2”代碼如下。

if(thisObj.value.indexOf(".") >=0)
{
    if(fieldLength <= 4)
    {
        return true;
    }
    else
    {
        var str = thisObj.value;
        str = str.substring(0, str.length - 1);
        thisObj.value = str;
    }
}
else
{
    if(fieldLength <= 2)
    {
        return true;
    }
    else
    {
        var str = thisObj.value;
        str = str.substring(0, str.length - 1);
        thisObj.value = str;
    }
}

Answer 9

你可以很容易地做到這一點，

<input type="text" pattern="\d*" maxlength="4">

Answer 10

2020 年類型號的正確方法是檢查 keydown 驗證，它應該像這樣工作： onkeypress="checkValidation(fieldValue);" <-- 在 html 和 js 中輸入：

checkValidation(a) {
    if (`${a}`.length < 8) {
        return true;
    } else {
        return false;
    }
}

Answer 11

像這樣使用 maxlength 屬性。

<input type="text" maxlength="5"/>

Answer 12

伙計，為什么要使用 javascript？ 你試一試

<input type="text" maxlength="4" size="4">

maxlength 無論如何都會定義輸入字段的最大長度。

希望這解決了問題:)

編輯：既然你特別想要數字，為什么不使用上面的然后運行 ​​jquery 驗證來檢查數字？ 這也將工作..

編輯：好的，試試

<input type="number" name="pin" min="1000" max="9999">

Answer 13

您是否嘗試過屬性 maxlength ？

<input type="text" maxlength="5" name="user" >