Question

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

1。）。js小提琴没有从HTML渲染ID为<div>的{{1}}。

单击按钮后，result2函数应运行，并且应获取ID为multiply()的{{1}}中的innerHTML。

我不确定为什么单击小提琴中的按钮后什么也没有发生。它应该说：

“ 1到5之间的所有数字相乘等于：120”

（例如，如果输入5）。我们应该看到此显示在<div> div中。

2。）为什么ID为result2的文本字段没有将输入限制为最大10个？我认为我已经在此处设置了此输入字段的最大值：

result2

（根据other articles的回答）。

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

有什么想法吗？

JavaScript

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

HTML

maxlength

CSS

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 ;

}

谢谢！

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>

Answer 2

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

第二如果您使用递增/递减箭头，则input类型的数字会将数字输入限制为所设置的最大值，但不会阻止用户输入更大的数字。如果需要停止较大数字的输入，可以通过使用onkeyup或onkeydown事件来更改输入值来实现。

已更新小提琴，其中包含上述更改： https://jsfiddle.net/6pagfr2t/

Answer 3

您可以实施事件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 4

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

重要说明：这只会返回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-如何使用-有效性检查来限制输入字段中允许的数字/值

4 个答案: