Как ограничить ввод только цифрами 0-9? - PullRequest
Новая
       19

Как ограничить ввод только цифрами 0-9?

1 голос
/ 21 сентября 2019

Мне нужно написать код таким образом, чтобы в текстовое поле можно было вводить только цифры от 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>

Ответы [ 2 ]

2 голосов
/ 21 сентября 2019

Просто убедитесь, что ваша переменная 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>
0 голосов
/ 21 сентября 2019 
<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>

Надеюсь, этопомогает:)

...