什么是限制“数字”仅输入文本框的最佳方法?
我在找一些允许小数点的东西。
我看到很多这样的例子。但还没决定用哪一种。
Praveen Jeganathan报道
不再有插件,jQuery在1.7版本中实现了自己的jQuery. isnumeric()。 参见:https://stackoverflow.com/a/20186188/66767
什么是限制“数字”仅输入文本框的最佳方法?
我在找一些允许小数点的东西。
我看到很多这样的例子。但还没决定用哪一种。
Praveen Jeganathan报道
不再有插件,jQuery在1.7版本中实现了自己的jQuery. isnumeric()。 参见:https://stackoverflow.com/a/20186188/66767
当前回答
根据CanIUse的数据,截至2015年10月,HTML5支持输入类型数字,全球浏览器的支持度高达88%以上。
<input type="number" step="0.01" min="0" name="askedPrice" id="askedPrice" />
这不是JQuery相关的解决方案,但优点是在手机上的Android键盘会对输入数字进行优化。
或者,也可以使用带有新参数"pattern"的输入类型文本。更多细节在HTML5规范。
我认为它比jquery解决方案更好,因为在这个问题中提供的jquery解决方案不支持千位分隔符。如果你能使用html5。
JSFiddle: https://jsfiddle.net/p1ue8qxj/
其他回答
我第一次尝试用jQuery解决这个问题,但我不满意不需要的字符(非数字)实际上出现在输入字段刚刚被删除在keyup。
在寻找其他解决方案时,我发现:
整数(非负)
<script>
function numbersOnly(oToCheckField, oKeyEvent) {
return oKeyEvent.charCode === 0 ||
/\d/.test(String.fromCharCode(oKeyEvent.charCode));
}
</script>
<form name="myForm">
<p>Enter numbers only: <input type="text" name="myInput"
onkeypress="return numbersOnly(this, event);"
onpaste="return false;" /></p>
</form>
来源:https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onkeypress的例子 实例:http://jsfiddle.net/u8sZq/
小数点(非负)
为了允许一个小数点,你可以这样做:
<script>
function numbersOnly(oToCheckField, oKeyEvent) {
var s = String.fromCharCode(oKeyEvent.charCode);
var containsDecimalPoint = /\./.test(oToCheckField.value);
return oKeyEvent.charCode === 0 || /\d/.test(s) ||
/\./.test(s) && !containsDecimalPoint;
}
</script>
来源:刚刚写了这个。似乎起作用了。 实例:http://jsfiddle.net/tjBsF/
其他定制
要允许输入更多的符号,只需将它们添加到充当基本字符代码过滤器的正则表达式中。 要实现简单的上下文限制,请查看输入字段(oToCheckField.value)的当前内容(状态)
一些你可能会感兴趣的事情:
只允许有一个小数点 只有在字符串的开头才允许使用减号。这将允许负数。
缺点
插入符号位置在函数内不可用。这大大减少了你可以实现的上下文限制(例如,没有两个相等的连续符号)。不知道最好的方法是什么。
我知道标题要求jQuery解决方案,但希望有人会发现这是有用的。
这很简单,我们已经有一个javascript内置函数“isNaN”在那里。
$("#numeric").keydown(function(e){
if (isNaN(String.fromCharCode(e.which))){
return false;
}
});
jquery。数值插件有一些bug,我通知了作者。它允许在Safari和Opera中使用多个小数点,而在Opera中不能输入退格键、方向键或其他几个控制字符。我需要正整数输入,所以最后我自己写了。
$(".numeric").keypress(function(event) {
// Backspace, tab, enter, end, home, left, right
// We don't support the del key in Opera because del == . == 46.
var controlKeys = [8, 9, 13, 35, 36, 37, 39];
// IE doesn't support indexOf
var isControlKey = controlKeys.join(",").match(new RegExp(event.which));
// Some browsers just don't raise events for control keys. Easy.
// e.g. Safari backspace.
if (!event.which || // Control keys in most browsers. e.g. Firefox tab is 0
(49 <= event.which && event.which <= 57) || // Always 1 through 9
(48 == event.which && $(this).attr("value")) || // No 0 first digit
isControlKey) { // Opera assigns values for control keys.
return;
} else {
event.preventDefault();
}
});
作为对这个建议的轻微改进,您可以使用带有number()、digits和range方法的Validation插件。例如,下面的语句确保你得到一个0到50之间的正整数:
$("#myform").validate({
rules: {
field: {
required: true,
number: true,
digits: true,
range : [0, 50]
}
}
});
如果你使用的是HTML5,你就不需要花大力气去执行验证。只要用——
<input type="number" step="any" />
step属性允许小数点有效。