目前我有以下代码

<input type="number" />

结果是这样的

右边的选择器允许数字变为负数。我该如何预防呢?

我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?


当前回答

我已经找到了防止负数的另一种解决方案。

<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">

其他回答

尝试这个选项,并给出最小值和最大值

<输入类型=“数字” 模式=“\d+” 输入模式=“数字” 值=“123” 自动完成=“关闭” 最大长度=“5” 步骤=“1” min=“0” max=“99999” >

其他解决方案是使用Js使它为正(min选项可以被禁用,当用户输入smth时无效)负if是不必要的,on('keydown')事件也可以使用!

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});

添加一个min属性

<输入类型=“数字” min=“0”>

这个解决方案可能看起来有点多余,但它照顾到了每个方面。

在表单中使用this

<input type="number" min="0" (keypress)="onlyDigits($event)" >

在。ts中定义函数

onlyDigits(event) {
   let code = event.charCode;
   return (code >= 48 && code <= 57);
}

这确保箭头只输入正数。它还可以防止输入任何非数字字符(包括'-','+'和'e')

我认为使用类型文本是最好的,而不是数字,因为使用类型=数字,你将面临一些问题,如输入字段的方向键和上、下键的值变化。


<input type="text" onkeypress="return event.charCode>=48 && event.charCode<=57" />