javascript - 创建一个仅接受 0-9 的文本框，并通过为每个数字添加“1”使这些数字出现在另一个文本框中

Question

我有两个文本框字段，我通过正则表达式创建了第一个仅接受 0-9 的数字，并让它们再次出现在第二个文本框字段中；
我需要当您在第一个文本框字段中键入任何数字时，这些数字会出现在第二个文本框中，方法是为每个数字添加“1”

例如：
当您在第一个字段中输入“0”==>
当您在第一个字段中输入“1”时，第二个字段显示“1”==>第二个字段显示“2”
......
当您在第一个字段中输入“9” ==> 出现警报告诉您“系列已结束，您不能输入 9”

这是JS代码

   var n1 = document.getElementById('numbers-1').value,
       n2 = document.getElementById('numbers-2').value;

    function numbersOnly(input) {
        var regex2 = /[^0-9]/;
        input.value = input.value.replace(regex2, "");

        var n2 = document.getElementById('numbers-1').value;
        document.getElementById('numbers-2').value = n2;
    }

这是HTML代码

  <input type="text" maxlength="10" id="numbers-1" oninput="numbersOnly(this)"><br>
  <input type="text" id="numbers-2">

多谢你们

标签： javascripthtmlforms

Answer 1

你可以这样做，如果需要更多解释，请告诉我

function numbersOnly(input) {
    var regex2 = /[^0-9]/;
    var val = parseInt(input.replace(regex2, ""));
    if(!isNaN(val)) {
      if(val.toString().indexOf('9') > -1) {
        document.getElementById('numbers-1').value = "";
        document.getElementById('numbers-2').value = "";
        alert('the series is ended, you cannot type 9');
      }
      else{
        document.getElementById('numbers-2').value = val+1;
      }
    } else {
       document.getElementById('numbers-1').value = "";
       document.getElementById('numbers-2').value = "";
    }
     
}

<input type="text" maxlength="10" id="numbers-1" oninput="numbersOnly(this.value)"><br>
  <input type="text" id="numbers-2">