代码之家 › 专栏 › 技术社区 › HappyHands31

如何使用HTML、CSS或JavaScript限制输入字段中允许的数字

jsfiddle css html javascript

HappyHands31 · 技术社区 · 6 年前

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

1.) <div> 有身份证吗 result2 从HTML。

单击按钮后 multiply() 函数应该运行,它应该获得 innerHTML 的 <部门; 带id 结果2

我不知道为什么点击小提琴上的按钮后什么也没发生。它应该说:

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

(例如,如果输入了5)。我们应该在 结果2 分部。

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>

.row {
    height: 200px;
}

谢谢!

0 回复 | 直到 6 年前

Shilly 6 年前

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

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>

Hien Nguyen 6 年前

您可以实现事件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/

Jako Basson 6 年前

弗斯特 如果您查看控制台,会发现一个错误,即未定义乘法函数。将javascript内联移动到html上方可以解决缺少的函数引用。

第二个 这个 input 如果使用递增/递减箭头,则类型number将数字输入限制为设置的最大值,但它不会阻止用户输入更大的数字。如果需要停止输入较大的数字,可以使用 onkeyup 或 onkeydown 事件更改输入值。

更新的提琴与提及的变化应用: https://jsfiddle.net/6pagfr2t/

Bryce Howitson 6 年前

或者,您可以在没有Javascript的情况下进行有效性模式检查。HTML5输入规范允许使用 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