目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
当前回答
这个解决方案可能看起来有点多余,但它照顾到了每个方面。
在表单中使用this
<input type="number" min="0" (keypress)="onlyDigits($event)" >
在。ts中定义函数
onlyDigits(event) {
let code = event.charCode;
return (code >= 48 && code <= 57);
}
这确保箭头只输入正数。它还可以防止输入任何非数字字符(包括'-','+'和'e')
其他回答
这取决于你想要多精确。如果你想只接受整数,那么:
<输入类型=“数字” 分钟=“1” 步数=“1”>
例如,如果你想要浮点数,小数点后有两位数字:
<输入类型=“数字” min=“0.01” 步数=“0.01”>
我已经找到了防止负数的另一种解决方案。
<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">
如果需要文本输入,该模式也可以工作
<input type="text" pattern="\d+">
其他解决方案是使用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”>