JavaScript、HTML、CSS - 如何限制输入字段中允许的数字/值 - 有效性检查

Question

https://jsfiddle.net/gcqojLfp/2/

1.) js fiddle 没有渲染 HTML 中 ID 为 result2 的 <div> .

单击按钮后，multiply() 函数应该运行并且它应该获取 ID 为 result2 的 <div> 的 innerHTML。

我不确定为什么点击 fiddle 中的按钮后没有任何反应。它应该说：

"All of the numbers between 1 and 5 multiplied together equals: 120"

（例如，如果输入 5）。我们应该在 result2 div 中看到它。

2.) 为什么id为factorialInput的文本框不限制最大输入10？我以为我已经在此处设置了此输入字段的最大值：

<input id="factorialInput" type="number" max="10" size="20"/>

（根据 other articles 的回答）。

我也试过 maxlength - 我不明白为什么它允许数字 11 及以上。

有什么想法吗？

JavaScript

function multiply() {
    let num = document.getElementById("factorialInput").value;
    let sum = 1;
    for (let i=1; i<= num; i++) {
        sum = sum * i;
    }

    document.getElementById("result2").innerHTML  = "All of the numbers between 
    1 and " + num + " multiplied together equals: " + sum ;

}

HTML

<div class="row">
    <form id="enterValue">
    Enter a number between 1 and 10: 
    <input id="factorialInput" type="number" max="10" size="20"/>
    <input type ="button" value="Submit" onclick="multiply();" max="10" />
    </form>
    <br><br>
<div id="result2"></div>
</div>

CSS

.row {
    height: 200px;
}

谢谢！

Answer 1

首先如果看控制台，出现乘法函数未定义的错误。将 javascript 内联移动到 html 上方可解决缺少的函数引用。

Second 如果使用 increment/decrement 箭头，input 类型数字将数字输入限制为最大值集，但它不会阻止用户输入更大的数字。如果您需要停止输入更大的数字，您可以通过使用 onkeyup 或 onkeydown 事件来更改输入值来实现。

已更新 fiddle 并应用了上述更改： https://jsfiddle.net/6pagfr2t/

Answer 2

您可以实施事件 keyup keydown 以防止无效值。

$('#factorialInput').on('keydown keyup', function(e){
    if ($(this).val() > 10 
        && e.keyCode !== 46 // keycode for delete
        && e.keyCode !== 8 // keycode for backspace
       ) {
       e.preventDefault();
       $(this).val('');
    }
});

https://jsfiddle.net/viethien/mrt6hw8c/6/

Answer 3

您必须手动检查输入是否有效，如文档中所述。

function multiply() {
  let input = document.getElementById("factorialInput");
  if ( input.reportValidity() ) {
    let num = input.value;
    let sum = 1;
    for (let i=1; i<= num; i++) {
      sum = sum * i;
    }
    let message = "All of the numbers between 1 and " + num + " multiplied together equals: " + sum;
    document.getElementById("result2").innerHTML  = message;
  }
}

<div class="row">
    <form id="enterValue">
      Enter a number between 1 and 10: 
      <input id="factorialInput" type="number" max="10" size="20"/>
      <input type ="button" value="Submit" onclick="multiply();" max="10" />
    </form>
    <br>
    <br>
  <div id="result2"></div>
</div>

Answer 4

或者，您可以在不 Javascript 的情况下进行有效性模式检查。 HTML 5 输入规范允许使用 regex 进行输入 valid/invalid.

重要说明：这只是 returns 和 TRUE/FALSE。 由您来处理创建和显示任何错误。

示例：

<input type="number" pattern="[1-9]|0[1-9]|10" placeholder="1 to 10" value="" />

和CSS

input:valid {
  background-color: green;
}

input:invalid {
  background-color: red;
}

有关 styling valid/invalid inputs

的更多信息

JavaScript、HTML、CSS - 如何限制输入字段中允许的数字/值 - 有效性检查

JavaScript, HTML, CSS - How to Restrict Number / Value Allowed in Input Field With - Validity Check

html

javascript

css

jsfiddle