Maxlength在使用Javascript數字輸入時不起作用

我在輸入框中插入數字時遇到了一些問題。更具體一些，我使用屏幕上顯示的定製鍵盤，只能使用同一個鍵盤在輸入框中寫入數字，最多可寫入5個數字。但HTML maxlength在這種情況下，atrribute不起作用。當我嘗試使用實際的鍵盤編寫數字時，它工作正常，但使用自定義鍵盤插入時不起作用。Maxlength在使用Javascript數字輸入時不起作用

問題是我該如何讓它工作？

<script> 
 
    function addNumber(element) { 
 

 
    document.getElementById('child').value = document.getElementById('child').value + element.value; 
 

 
    } 
 
    function deleteNumber(){ 
 
\t 
 
\t document.getElementById('child').value=''; 
 
\t 
 
\t 
 
} 
 
</script> 
 

 
<div class='form-group'> 
 
    <div id="staticParent"> 
 
    <div class='col-md-6'> 
 
     <input class='form-control' id='child' name="username" type='text' maxlength="5" readonly='readonly' /> 
 
     <input type="button" class="fbutton" name="1" value="1" id="1" onClick=addNumber(this); /> 
 
     <input type="button" class="fbutton" name="2" value="2" id="2" onClick=addNumber(this); /> 
 
     <input type="button" class="fbutton" name="3" value="3" id="3" onClick=addNumber(this); /> 
 
     <input type="button" class="fbutton" name="4" value="4" id="4" onClick=addNumber(this); /> 
 
     <input type="button" class="fbutton" name="5" value="5" id="5" onClick=addNumber(this); /> 
 
     <input type="button" class="fbutton" name="6" value="6" id="6" onClick=addNumber(this); /> 
 
     <input type="button" class="fbutton" name="7" value="7" id="7" onClick=addNumber(this); /> 
 
     <input type="button" class="fbutton" name="8" value="8" id="8" onClick=addNumber(this); /> 
 
     <input type="button" class="fbutton" name="9" value="9" id="9" onClick=addNumber(this); /> 
 
     <input type="button" class="fbutton" name="0" value="0" id="0" onClick=addNumber(this); /> 
 
     <input type='button' class='fbutton' name='delete' value='Delete' onClick=deleteNumber(this); /> 
 
    </div> 
 
    </div>

來源

2015-07-20 MadMaxa

極壞的HTML格式，這已經是不相關的jQuery的根本。 – Raptor

這些驗證僅在用戶輸入值時應用...而不是在您編程式地進行更改時 –

而且，並非所有瀏覽器都尊重'maxlength'屬性。 – royhowie

你可以用下面的一個替換你的addNumber函數，這將解決你的問題。

function addNumber(element) { 
    var value1 = document.getElementById('child').value + element.value; 
    if(value1.length > 5) return false; 
    document.getElementById('child').value = value1; 
    }

來源

2015-07-20 07:10:02 Pratik

非常感謝，它工作 – MadMaxa

如果用戶實際使用真正的鍵盤，而不是用於編程改變值，你不能那樣做因爲maxlength纔有效。

繞過它只是在你的addNumber功能應用檢查：

function addNumber() { 

    var input = document.getElementById('child'); 

    if (input.value.length > 5) { 
    return false; 
    } 
    else { 
    // Do stuff 
    } 
}

除非輸入長度小於或等於5

而且你不應該這樣不會增加新號碼不要使用onclick屬性調用事物。相反，與addEventListener添加事件偵聽器：

var addBtns = document.getElementsByClassName('fbutton'); 

for (var i = 0; i < addBtns.length; i++) { 
    addBtns[i].addEventListener('click', addNumber); 
}

請注意，你必須使用一個循環來添加事件偵聽器，因爲addBtns是一個數組。

來源

2015-07-20 07:08:50 Chrillewoodz

你可以試試這個maxlength=5。您將刪除""

<input class='form-control' id='child' name="username" type='text' maxlength=5 readonly='readonly' />

來源

2015-07-20 07:13:34

Maxlength在使用Javascript數字輸入時不起作用

回答

相關問題