什么是限制“数字”仅输入文本框的最佳方法?
我在找一些允许小数点的东西。
我看到很多这样的例子。但还没决定用哪一种。
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
当前回答
我认为最好的答案就是上面的方法。
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, '');
}
});
这样,如果有任何按钮点击,不会导致文本被改变,忽略它。有了这个,你可以点击箭头和删除,而不跳到最后,但它清除任何非数字文本。
其他回答
戴夫·亚伦·史密斯,谢谢你的帖子
我编辑了你的答案,接受小数点和数字的数字部分。这个工作非常适合我。
$(".numeric").keypress(function(event) {
// Backspace, tab, enter, end, home, left, right,decimal(.)in number part, decimal(.) in alphabet
// We don't support the del key in Opera because del == . == 46.
var controlKeys = [8, 9, 13, 35, 36, 37, 39,110,190];
// 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
(96 <= event.which && event.which <= 106) || // Always 1 through 9 from number section
(48 == event.which && $(this).attr("value")) || // No 0 first digit
(96 == event.which && $(this).attr("value")) || // No 0 first digit from number section
isControlKey) { // Opera assigns values for control keys.
return;
} else {
event.preventDefault();
}
});
这是我刚刚完成的一个代码片段(使用Peter Mortensen / Keith Bentrup的一部分代码),用于对文本字段进行整数百分比验证(jQuery是必需的):
/* This validates that the value of the text box corresponds
* to a percentage expressed as an integer between 1 and 100,
* otherwise adjust the text box value for this condition is met. */
$("[id*='percent_textfield']").keyup(function(e){
if (!isNaN(parseInt(this.value,10))) {
this.value = parseInt(this.value);
} else {
this.value = 0;
}
this.value = this.value.replace(/[^0-9]/g, '');
if (parseInt(this.value,10) > 100) {
this.value = 100;
return;
}
});
这段代码:
允许使用主数字键和数字键盘。 验证以排除shift数字字符(例如#,$,%等) 将NaN值替换为0 替换为100个大于100的值
我希望这能帮助到那些需要帮助的人。
只需通过parseFloat()运行内容。它将在无效输入时返回NaN。
不需要长代码的数字输入限制,只是尝试这段代码。 它还接受有效的int和float值。
Javascript方法
onload = function () { var ele = document.querySelectorAll('.number-only')[0]; 避署。Onkeypress =函数(e) { 如果(isNaN (this.value + " " + String.fromCharCode (e.charCode))) 返回错误; } 避署。Onpaste = function(e){ e.preventDefault (); } } <p>只接受有效的int和float值的输入框 <input class="number-only" type=text />
jQuery方法
$(函数(){ $ (' .number-only ') .keypress(函数(e) { if(isNaN(this.value+""+String.fromCharCode(e.charCode)))返回false; }) .on("剪切复制粘贴",函数(e){ e.preventDefault (); }); }); < script src = " https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js " > < /脚本> <p>只接受有效的int和float值的输入框 <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 />
最好的方法是在文本框失去焦点时检查它的上下文。
可以使用正则表达式检查内容是否为“数字”。
或者你也可以使用Validation插件,它基本上会自动完成。