javascript - 使用 Javascript 数字输入时 Maxlength 不起作用

Question

我在输入框中插入数字时遇到了一个小问题。更具体地说。我使用屏幕上显示的定制键盘，只能使用相同的键盘在输入框中输入数字，最多可以写入 5 个数字。但是 HTML maxlength atrribute 在这种情况下不起作用。当我尝试使用实际键盘输入数字时它起作用，但是当使用自定义键盘插入时它不起作用。

问题是我怎样才能让它发挥作用？

<script>
  function addNumber(element) {

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

  }
  function deleteNumber(){
	
	document.getElementById('child').value='';
	
	
}
</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>

Answer 1

您可以将您的 addNumber 函数替换为以下函数，这将解决您的问题。

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