什么是限制“数字”仅输入文本框的最佳方法?
我在找一些允许小数点的东西。
我看到很多这样的例子。但还没决定用哪一种。
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
当前回答
$(".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();
}
});
这段代码对我来说工作得很好,我只需要在controlKeys数组中添加46来使用句号,虽然我不认为是最好的方法;)
其他回答
下面是我用来阻止击键的。这只允许数字0-9和小数点。易于实现,不需要大量代码,并且工作起来很有魅力:
<script>
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
} else {
return true;
}
}
</script>
<input value="" onkeypress="return isNumberKey(event)">
我第一次尝试用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解决方案,但希望有人会发现这是有用的。
window.jQuery.fn.ForceNumericOnly =
function () {
return this.each(function () {
$(this).keydown(function (event) {
// Allow: backspace, delete, tab, escape, and enter
if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||
// Allow: Ctrl+A
(event.keyCode == 65 && event.ctrlKey === true) ||
// Allow: home, end, left, right
(event.keyCode >= 35 && event.keyCode <= 39)) {
// let it happen, don't do anything
return;
} else {
// Ensure that it is a number and stop the keypress
if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
event.preventDefault();
}
}
});
});
};
把这个应用到你想要的所有输入上:
$('selector').ForceNumericOnly();
我使用这个函数,它工作得很好
$(document).ready(function () {
$("#txt_Price").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
//if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57))
if ((e.which != 46 || $(this).val().indexOf('.') != -1) && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
jquery。数字插件也很适合我。
我唯一不喜欢的就是直觉。在没有任何反馈的情况下,按键被“禁止”,用户可能会变得偏执或怀疑他的键盘是否坏了。
我在插件中添加了第二个回调函数,使阻塞输入的简单反馈成为可能:
$('#someInput').numeric(
null, // default config
null, // no validation onblur callback
function(){
// for every blocked keypress:
$(this).effect("pulsate", { times:2 }, 100);
}
);
当然,这只是一个示例(使用jQuery UI)。任何简单的视觉反馈都有帮助。