目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
目前我有以下代码
<input type="number" />
结果是这样的
右边的选择器允许数字变为负数。我该如何预防呢?
我对使用type="number"有疑问,它造成的问题比它解决的要多,我无论如何都要检查它,所以我应该回到使用type="text"吗?
当前回答
我认为使用类型文本是最好的,而不是数字,因为使用类型=数字,你将面临一些问题,如输入字段的方向键和上、下键的值变化。
<input type="text" onkeypress="return event.charCode>=48 && event.charCode<=57" />
其他回答
添加一个min属性
<输入类型=“数字” min=“0”>
在输入类型中添加此代码;
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" />
这取决于你想要多精确。如果你想只接受整数,那么:
<输入类型=“数字” 分钟=“1” 步数=“1”>
例如,如果你想要浮点数,小数点后有两位数字:
<输入类型=“数字” min=“0.01” 步数=“0.01”>
(function ($) { $.fn.inputFilter = function (inputFilter) { return this.on('input keydown keyup mousedown mouseup select contextmenu drop', function () { if (inputFilter(this.value)) { this.oldValue = this.value; this.oldSelectionStart = this.selectionStart; this.oldSelectionEnd = this.selectionEnd; } else if (this.hasOwnProperty('oldValue')) { this.value = this.oldValue; //this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd); } else { this.value = ''; } }); }; })(jQuery); $('.positive_int').inputFilter(function (value) { return /^\d*[.]?\d{0,2}$/.test(value); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="number" class="positive_int"/>
以上代码可以正常工作!!它还可以防止插入超过2个小数点。如果你不需要这个,只要删除\d{0,2},或者如果需要更有限的小数点,只要改变2
我已经找到了防止负数的另一种解决方案。
<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">