input type=number

Question

我想将用户输入限制为html格式的正数。

我知道您可以设置min =“0”，但是可以通过手动输入负数来绕过它。

如果不编写验证函数，还有其他方法可以解决这个问题吗？

Answer 1

这使用Javascript，但您不必编写自己的验证例程。而只需检查validity.valid属性。当且仅当输入在范围内时才会出现这种情况。

＆＃13;

<html>
<body>
<form action="#">
  <input type="number" name="test" min=0 oninput="validity.valid||(value='');"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

＆＃13;

Answer 2

如果不验证输入值，则无法进行此操作。

input type=number

具有type属性值为“number”的input元素表示一个精确控件，用于将元素的值设置为表示数字的字符串。

由于它是一个表示数字的字符串，因此无法确定字符串是否表示数值。

Permitted属性不允许您验证数字输入控件的值。

在JavaScript的帮助下实现此目的的一种方法可能是这样的。

// Select your input element.
var numInput = document.querySelector('input');

// Listen for input event on numInput.
numInput.addEventListener('input', function(){
    // Let's match only digits.
    var num = this.value.match(/^\d+$/);
    if (num === null) {
        // If we have no match, value will be empty.
        this.value = "";
    }
}, false)

<input type="number" min="0" />

如果您计划将数据发送到服务器，请确保也验证服务器上的数据。客户端JavaScript无法确保正在发送的数据将是您期望的数据。

Answer 3

如果要确保默认值，即最小值或任何其他值，这是可行的解决方案。这也阻止了清除输入字段。同样，您也可以将其设置为最大值。

<input type="number" min="1" max="9999" maxlength="4" oninput="this.value=this.value.slice(0,this.maxLength||1/1);this.value=(this.value   < 1) ? (1/1) : this.value;">

Answer 4

以下脚本只允许在输入中输入数字或退格。

＆＃13;

var number = document.getElementById('number');

number.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}

＆＃13;

<input type="number" id="number" min="0">

＆＃13;

Answer 5

type="number"已经解决了只允许键入数字的问题，正如其他答案所指出的那样。

仅供参考：使用jQuery，您可以使用以下代码覆盖focusout上的负值：

$(document).ready(function(){
    $("body").delegate('#myInputNumber', 'focusout', function(){
        if($(this).val() < 0){
            $(this).val('0');
        }
    });
});

这不会取代服务器端验证！

Answer 6

在HTML5中，我喜欢这种方式。同样，它也非常适合角度。

<input type="number" min="0" oninput="this.value = Math.abs(this.value)">

Answer 7

在html上放置onKeypress事件侦听器

<input type="text" onkeypress="validate(event)">

这样编写validate函数：

<script>
    function validate(event) {
      if (event.key == "-") {
        event.preventDefault();
        return false;
      }
    }    
</script>

如果angularjs通过$event代替event，我已经在angularjs和javascript中对此进行了测试

Answer 8

方法01：

模板：

<input name="price" type="number" (keydown)="onKeydown($event)" min="0" required />

文件名.ts：

onKeydown(event: KeyboardEvent): boolean {
    if (!((event.keyCode > 95 && event.keyCode < 106)
      || (event.keyCode > 47 && event.keyCode < 58)
      || event.keyCode === 8)) {
        return false;
    }
    return true;
  }

方法02：

模板：

<input name="price" type="number" min="0" oninput="this.value = Math.abs(this.value)" required />

在表单输入类型=“数字”中防止负输入？

8 个答案:

input type=number

模板：

文件名.ts：

模板：