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

Question

我試圖限制輸入中的字符數（類型）。香港專業教育學院嘗試了很多選擇，似乎沒有任何工作。我不想使用選項電話，因爲它需要移動設備上的數字鍵盤（是的，與。和所有的符號）我也試圖模式解決方案，但它只適用於iOS，沒有工作在Android（顯示正常鍵盤）。

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

所以，任何幫助表示讚賞。

Answer 1

檢查這個代碼

的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; 
    } 
} 

及以下

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()" /> 

Fiddle Demo

與 number型HTML

更新 - 點點通用的代碼示例

更改上述功能爲這一個

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)" /> 

Demo

Answer 2

你試過maxlength屬性嗎？

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

Answer 3

使用像這樣的maxlength屬性。

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

Answer 4

老兄爲什麼要去javascript？試試

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

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

希望這解決了這個問題:)

編輯：既然你特別想要的數字，你爲什麼不使用上面，然後運行jQuery驗證檢查號碼？這也將工作..

編輯：好的，儘量

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

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

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

如果你想限制你可以設置爲0分鐘和9

一個最大值，您還可以設置step屬性，它默認是1字符1的數量，但會派上如果您想要選擇小數或其他舍入數字，可以使用。

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

下面是完整的demo

Answer 7

我覺得這需要onkeyup事件處理程序。

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

Answer 8

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

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

而這裏的demo。

Answer 9

你可以試試thiss 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(); 
     }   

    }); 


}); 

我沒有wheather其對IOS位於Android，但其在所有瀏覽器中工作的工作的想法。

DEMO

Answer 10

可能會有用。

這裏是輸入患者年齡的字段。它只允許輸入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 11

十進制值，可以說 「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 12

您可以輕鬆地做到這一點像這樣，

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