目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
当前回答
如果您尝试输入负数,onkeyup事件将阻止此操作,如果您在输入数字上使用箭头,onblur事件将解决此部分。
<输入类型=“数字” onkeyup=“if(this.value<0)this.value=1” onblur=“if(this.value<0)this.value=1” >
其他回答
对于文本类型的输入,你可以使用它来更好地验证,
return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();
在输入类型中添加此代码;
onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
例如:
<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />
这个解决方案可能看起来有点多余,但它照顾到了每个方面。
在表单中使用this
<input type="number" min="0" (keypress)="onlyDigits($event)" >
在。ts中定义函数
onlyDigits(event) {
let code = event.charCode;
return (code >= 48 && code <= 57);
}
这确保箭头只输入正数。它还可以防止输入任何非数字字符(包括'-','+'和'e')
其他解决方案是使用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()));
}
});
我找不到完美的解决方案,因为有些工作是输入,但不是复制和粘贴,有些是相反的方式。这个解决办法对我很管用。它防止负数,输入“e”,复制和粘贴“e”文本。
创建一个函数。
<script language="JavaScript">
// this prevents from typing non-number text, including "e".
function isNumber(evt) {
evt = (evt) ? evt : window.event;
let charCode = (evt.which) ? evt.which : evt.keyCode;
if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
evt.preventDefault();
} else {
return true;
}
}
</script>
将这些属性添加到输入中。这两个可以防止复制和粘贴非数字文本,包括“e”。你需要同时拥有两者才能生效。
<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />
如果你正在使用Vue,你可以参考这里的答案。我已经将它提取到一个可以重用的mixin中。