[英]How to limit input to numbers 0-9 only?
I need to write a code in a way only the numbers 1 - 9 are able to be input into a text field.我需要以一种只有数字 1 - 9 才能输入到文本字段中的方式编写代码。
Whatever the number in that is input into the text field, will output of the timetables from 1-9 for that number.无论在文本字段中输入的数字是多少,都会为该数字从 1 到 9 的时间表中的 output。
For example, if the number "1" was input: 1 x 1 = 1 to 1 x 9 = 9 will be listed.例如,如果输入数字“1”:将列出 1 x 1 = 1 到 1 x 9 = 9。
I can't figure out how to limit the input numbers to only 1,2,3,4,5,6,7,8 and 9. Here's the code I have so far:我不知道如何将输入数字限制为仅 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>
Just make sure that your integer
variable is an integer between 1 and 9:只需确保您的integer
变量是介于 1 和 9 之间的 integer :
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>
Another option is to use a form with a pattern of [1-9]
(though unfortunately, you can't combine a pattern
with an input type="number"
):另一种选择是使用具有[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>
<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>
The main changes I made are:我所做的主要更改是:
function numbersOnly(input){
var regex = /[^1-9]/;
input.value = input.value.replace(regex, "");
}
and和
<input id="integer" onkeyup="numbersOnly(this)" maxlength="1">
Edit编辑
<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>
Hope this helps:)希望这可以帮助:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.