如何仅将输入限制为数字 0-9？答案

【问题标题】：How to limit input to numbers 0-9 only?如何仅将输入限制为数字 0-9？
【发布时间】：2019-09-21 07:30:27
【问题描述】：

我需要编写一个只有数字 1 - 9 才能输入到文本字段中的代码。

无论在文本字段中输入的数字是什么，都会输出该数字从 1 到 9 的时间表。

例如，如果输入数字“1”：将列出 1 x 1 = 1 到 1 x 9 = 9。

我不知道如何将输入数字限制为仅 1、2、3、4、5、6、7、8 和 9。这是我到目前为止的代码：

<html>
<head>
<script>
function table(){
  var integerInput = document.getElementById("integer");
  var integer = Number(integerInput.value);

  var displayField = document.getElementById("display");
  //Reset the innerHTML when a new integer is inserted
  displayField.innerHTML = "";
  //Loop from 1 -> 9
  for(let i = 1; i <= 9; i++) {
      //Append the current times table to the HTML
      displayField.innerHTML += `${integer} x ${i} = ${integer*i}<br>`
  }
}
</script>
</head>
<body>
Enter an integer from 1 to 9:
  <input id="integer" type="text">
  <button onclick="table()" onclick="table2()">Generate times table</button>
  <p id="display"></p>


</body>
</html>

【问题讨论】：

使用<input type="number">
我仍然可以输入任何数字@User863

标签： javascript input numbers

【解决方案1】：

只需确保您的 integer 变量是 1 到 9 之间的整数：

function table() {
  var integerInput = document.getElementById("integer");
  var integer = Number(integerInput.value);
  if (!Number.isInteger(integer) || integer < 1 || integer > 9) {
    throw new Error('Number is not an integer between 1 and 9');
  }
  var displayField = document.getElementById("display");
  //Reset the innerHTML when a new integer is inserted
  displayField.innerHTML = "";
  //Loop from 1 -> 9
  for (let i = 1; i <= 9; i++) {
    //Append the current times table to the HTML
    displayField.innerHTML += `${integer} x ${i} = ${integer*i}<br>`
  }
}

Enter an integer from 1 to 9:
<input id="integer" type="text">
<button onclick="table()" onclick="table2()">Generate times table</button>
<p id="display"></p>

另一种选择是使用具有[1-9] 模式的表单（但遗憾的是，您不能将pattern 与input type="number" 结合使用）：

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  var integerInput = document.getElementById("integer");
  var integer = Number(integerInput.value);
  if (!Number.isInteger(integer) || integer < 1 || integer > 9) {
    throw new Error('Number is not an integer between 1 and 9');
  }
  var displayField = document.getElementById("display");
  //Reset the innerHTML when a new integer is inserted
  displayField.innerHTML = "";
  //Loop from 1 -> 9
  for (let i = 1; i <= 9; i++) {
    //Append the current times table to the HTML
    displayField.innerHTML += `${integer} x ${i} = ${integer*i}<br>`
  }
});

Enter an integer from 1 to 9:
<form>
  <input id="integer" pattern="[1-9]">
  <button>Generate times table</button>
  <p id="display"></p>
</form>

【讨论】：

【解决方案2】：

<html>
<head>
<script>
function table(){
  var integerInput = document.getElementById("integer");
  var integer = Number(integerInput.value);

  var displayField = document.getElementById("display");
  //Reset the innerHTML when a new integer is inserted
  displayField.innerHTML = "";
  //Loop from 1 -> 9
  for(let i = 1; i <= 9; i++) {
      //Append the current times table to the HTML
      displayField.innerHTML += `${integer} x ${i} = ${integer*i}<br>`
  }
}

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

</script>
</head>
<body>

Enter an integer from 1 to 9:
  <input id="integer" onkeyup="numbersOnly(this)" maxlength="1">
  <button onclick="table()" onclick="table2()">Generate times table</button>
  <p id="display"></p>


</body>
</html>

我所做的主要更改是：

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

和

<input id="integer" onkeyup="numbersOnly(this)" maxlength="1">

编辑

<html>
<head>
<script>
function table(){
  var integerInput = document.getElementById("integer");
  var integer = Number(integerInput.value);

  display_iterator(integer, "display")
  display_iterator(integer, "display2")
}

function display_iterator(integer, display_id){
    var displayField = document.getElementById(display_id);
    //Reset the innerHTML when a new integer is inserted
    displayField.innerHTML = "";
    //Loop from 1 -> 9
    for(let i = 1; i <= 9; i++) {
        //Append the current times table to the HTML
        displayField.innerHTML += `${integer} x ${i} = ${integer*i}<br>`
    }
}

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

</script>
</head>
<body>
Enter an integer from 1 to 9:
  <input id="integer" onkeyup="numbersOnly(this)" maxlength="1">
  <button onclick="table()">Generate times table</button>
  <table>
      <tr>
          <td>
              <p id="display"></p>
          </td>
          <td>
              <p id="display2"></p>
          </td>
      </tr>
  </table>
</body>
</html>

希望这会有所帮助:)

【讨论】：

非常有帮助，谢谢！如果我想在原始列表旁边显示重复的时间表列表，我会怎么做？
我只是使用了一个来排列 2 个显示。对于第二个显示，我使用另一个具有不同 id 的
标签来复制第一个显示。