Question

我有4个输入标签。

<input type="number" class="br1" name="first">
<input type="number" class="br1" name="secound">
<input type="number" class="br1" name="third">
<input type="number" class="br1" name="fourth">

我想为每个输入标签设置maxlength（4个数字）。我试图设置maxlength，但它不起作用。此外，当我在一个输入标签中输入4个数字时，我想在下一个输入标签中自动输入。

感谢。

Answer 1

使用max =＆＃34; 9999＆＃34;和min =＆＃34; 0000＆＃34;设置输入类型编号的最大值。

根据http://w3c.github.io/html/sec-forms.html#the-maxlength-and-minlength-attributes，maxlength对类型编号的输入无效。

Answer 2

如果要将maxlength更改输入类型用于文本。然后，您可以将所有输入字符串解析为数字。

$(".br1").keyup(function () {
    if (this.value.length == this.maxLength) {
      var $next = $(this).next('.br1');
      if ($next.length)
          $(this).next('.br1').focus();
      else
          $(this).blur();
    }
});

$(".btn").click(function() {
	var string = "";
 $(".br1").each(function() {
 	string += this.value;
 });
 number = parseInt(string);
 console.log(number);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="br1" name="first" maxlength=4>
    <input type="text" class="br1" name="secound" maxlength=4>
    <input type="text" class="br1" name="third" maxlength=4>
    <input type="text" class="br1" name="fourth" maxlength=4>
    <button class="btn">toNumber</button>

Answer 3

您可以使用附加到input元素的.br1个活动，.slice()使用参数0，-1删除.length .value时的字符{1}}大于4

＆＃13;

var inputs = document.querySelectorAll(".br1");
for (let input of inputs) {
  input.oninput = () => {
    if (input.value.length > 4) {
      input.value = input.value.slice(0, -1)
    }
  }
}

＆＃13;

<input type="number" class="br1" name="first">
<input type="number" class="br1" name="secound">
<input type="number" class="br1" name="third">
<input type="number" class="br1" name="fourth">

＆＃13;

Answer 4

尽可能简单，试试这个：

＆＃13;

input[type=number]{
width:60px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <input type="number" class="br1" name="first">
    <input type="number" class="br2" name="first">
    <input  type="number" class="br3" name="first">
    <input type="number" class="br4" name="first">

＆＃13;

nop

＆＃13;

Answer 5

您只能使用javascript执行此操作。另请注意，maxLength属性不适用于数字，因此您可能需要使用input type ='text'

这是片段

 // get the input
    var inputBox = document.getElementsByClassName("br1")
    // loop through the array of input
    for (var i = 0; i < inputBox.length; i++) {
      // creating a closure
      (function(x) {
        // adding event listener to each of the input
        inputBox[x].addEventListener('keydown', function(x) {
          // checking value of maxLength
          var maxLength = parseInt(this.attributes["maxlength"].value, 10);
          // length of the input value
          var myLength = this.value.length;
          // if both are equal then find the next sibling
          if (myLength >= maxLength) {
            var next = this.nextElementSibling
            // if the next sibling is input, set focus to it
            if (next.tagName.toLowerCase() === "input") {
              next.focus();
            }
          }
        })
      }(i))
    }

输入信用卡的标签类型编号

5 个答案: