如何最好地限制文本框中只能输入“数字”?
我想要允许输入小数点。
我看到很多例子,但还没有决定要使用哪个。
Praveen Jeganathan 的更新
不再需要插件,jQuery 已经在 v1.7 中实现了自己的 jQuery.isNumeric()
。
请见:https://dev59.com/q3NA5IYBdhLWcg3wn_Q1#20186188
如何最好地限制文本框中只能输入“数字”?
我想要允许输入小数点。
我看到很多例子,但还没有决定要使用哪个。
Praveen Jeganathan 的更新
不再需要插件,jQuery 已经在 v1.7 中实现了自己的 jQuery.isNumeric()
。
请见:https://dev59.com/q3NA5IYBdhLWcg3wn_Q1#20186188
如果你想限制输入(而不是验证),可以使用按键事件。可以像这样实现:
<input type="text" class="numbersOnly" value="" />
并且:
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
这样做可以立即让用户知道他们不能输入字母等内容,而不是在验证阶段后才发现。
尽管如此,您仍应进行验证,因为输入可能是通过鼠标剪切和粘贴填充的,或者可能是通过表单自动完成程序填充的,这些可能不会触发键事件。
$doc.on('keyup blur input propertychange', 'input[name="price"]', function(){$(this).val($(this).val().replace(/[^0-9\.]/g,''));});
- Rens Tillmann现在有一个非常简单的解决方案:
它允许您在文本输入框(
<input>
)上使用任何类型的输入过滤器,包括各种数字���滤器。这将正确处理复制+粘贴,拖放,键盘快捷键,上下文菜单操作,不可键入的键以及所有键盘布局。
请参见此答案或自行尝试在JSFiddle上进行测试。
我已经成功地使用jquery.numeric插件实现了许多表单。
$(document).ready(function(){
$(".numeric").numeric();
});
而且这也适用于文本区域!
然而,请注意Ctrl+A、复制+粘贴(通过上下文菜单)和拖放不会按预期工作。
随着对HTML 5标准的更广泛支持,我们可以使用pattern
属性和number
类型来限制只能输入数字的input
元素。在一些浏览器中(特别是Google Chrome),它也可以限制粘贴非数字内容。有关number
和其他新的输入类型的更多信息可在此处了解。
type="number"
的输入字段中时,此方法无法正常工作。 - Tallmaris我认为最好的答案是上面的答案,只需这样做。
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
但我同意光标键和删除键会将光标强制移到字符串末尾,这确实有点麻烦(正因为如此,在测试中被退回给了我)。
我做了一个简单的更改。
$('.numbersOnly').keyup(function () {
if (this.value != this.value.replace(/[^0-9\.]/g, '')) {
this.value = this.value.replace(/[^0-9\.]/g, '');
}
});
如果有任何不会导致文本更改的按钮被按下,就忽略它。这样,您就可以点击箭头和删除而不跳到末尾,但会清除任何非数字文本。
keypress
,因为显然 keyup
和 keydown
会触发任何键盘键,而 keypress
仅触发“字符”键(因此不会触发箭头和删除键)。 查看此答案以供参考:https://dev59.com/43M_5IYBdhLWcg3wdy7z#1367720 - Ian Campbelljquery.numeric插件存在一些错误,我已经通知作者了。在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();
}
});
不再需要插件,jQuery 已经在 v1.7 中实现了自己的 jQuery.isNumeric()。
jQuery.isNumeric( value )
判断参数是否为数字。
$.isNumeric( "-10" ); // true
$.isNumeric( 16 ); // true
$.isNumeric( 0xFF ); // true
$.isNumeric( "0xFF" ); // true
$.isNumeric( "8e5" ); // true (exponential notation string)
$.isNumeric( 3.1415 ); // true
$.isNumeric( +10 ); // true
$.isNumeric( 0144 ); // true (octal integer literal)
$.isNumeric( "" ); // false
$.isNumeric({}); // false (empty object)
$.isNumeric( NaN ); // false
$.isNumeric( null ); // false
$.isNumeric( true ); // false
$.isNumeric( Infinity ); // false
$.isNumeric( undefined ); // false
这是一个将isNumeric()与事件监听器结合使用的示例
$(document).on('keyup', '.numeric-only', function(event) {
var v = this.value;
if($.isNumeric(v) === false) {
//chop off the last char entered
this.value = this.value.slice(0,-1);
}
});
var v = this.value;
替换为 var v = this.value.replace(/,/g,'');
。数字如 21,345,67.800
也应被考虑在内。 - maan81$(document).on('keyup keypress', '#somethingSomething', function(){
var aValue = $(this).val();
if($.isNumeric(aValue) === false){
$(this).val(aValue.slice(0,-1));
}
});
- Gwi7d31上面提到的numeric()插件在Opera浏览器中无法正常工作(您无法使用退格键、删除键甚至是前进或后退键)。
以下代码在jQuery或JavaScript中都可以完美运行(而且只有两行)。
jQuery:
$(document).ready(function() {
$('.key-numeric').keypress(function(e) {
var verified = (e.which == 8 || e.which == undefined || e.which == 0) ? null : String.fromCharCode(e.which).match(/[^0-9]/);
if (verified) {e.preventDefault();}
});
});
JavaScript:
function isNumeric(e)
{
var keynum = (!window.event) ? e.which : e.keyCode;
return !((keynum == 8 || keynum == undefined || e.which == 0) ? null : String.fromCharCode(keynum).match(/[^0-9]/));
}
当然,这只适用于纯数字输入(加上退格、删除、前后键),但可以轻松地更改为包括小数点和负号字符。
$("#myform").validate({
rules: {
field: {
required: true,
number: true
}
}
});
无需冗长的代码即可限制数字输入,只需尝试此代码。
它还接受有效的int和float两个值。
onload =function(){
var ele = document.querySelectorAll('.number-only')[0];
ele.onkeypress = function(e) {
if(isNaN(this.value+""+String.fromCharCode(e.charCode)))
return false;
}
ele.onpaste = function(e){
e.preventDefault();
}
}
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
$(function(){
$('.number-only').keypress(function(e) {
if(isNaN(this.value+""+String.fromCharCode(e.charCode))) return false;
})
.on("cut copy paste",function(e){
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
更新
上述答案适用于大多数常见情况下 - 验证输入是否为数字。
但以下是用于特殊情况的代码片段
$(function(){
$('.number-only').keyup(function(e) {
if(this.value!='-')
while(isNaN(this.value))
this.value = this.value.split('').reverse().join('').replace(/[\D]/i,'')
.split('').reverse().join('');
})
.on("cut copy paste",function(e){
e.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> Input box that accepts only valid int and float values.</p>
<input class="number-only" type=text />
以下是我用来实现键盘输入限制的代码,只允许输入数字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)">
charCode != 46
来限制小数位。非常好的答案! - Gaʀʀʏ