Question

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

问题是如何让它发挥作用？

maxlength

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

Answer 2

您可以尝试maxlength=5。您将删除""

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

Answer 3

由于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是一个数组，因此必须使用循环来添加事件侦听器。

使用Javascript编号输入时Maxlength不工作

3 个答案: