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

Question

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

1.) js fiddle 没有呈现 <div> ID result2从 HTML。

点击按钮后，multiply()函数应该运行并且它应该得到 innerHTML的 <div> ID result2 .

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

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

(例如，如果输入 5)。我们应该在 result2 中看到它分区

2.) 为什么id为factorialInput的text field不限制输入最多为 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

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

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>