限制文本框仅输入“数字”的最佳方法是什么?
我正在寻找允许小数点的东西。
我看到很多例子。但尚未决定使用哪一个。
来自 Praveen Jeganathan 的更新
没有更多的插件,jQuery 在 v1.7 中实现了自己的jQuery.isNumeric()
添加。请参阅:https ://stackoverflow.com/a/20186188/66767
限制文本框仅输入“数字”的最佳方法是什么?
我正在寻找允许小数点的东西。
我看到很多例子。但尚未决定使用哪一个。
来自 Praveen Jeganathan 的更新
没有更多的插件,jQuery 在 v1.7 中实现了自己的jQuery.isNumeric()
添加。请参阅:https ://stackoverflow.com/a/20186188/66767
如果您想限制输入(而不是验证),您可以使用关键事件。像这样的东西:
<input type="text" class="numbersOnly" value="" />
和:
jQuery('.numbersOnly').keyup(function () {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
这会立即让用户知道他们不能输入字母字符等,而不是稍后在验证阶段。
您仍然需要验证,因为输入可能通过使用鼠标剪切和粘贴来填充,或者可能通过可能不会触发关键事件的表单自动完成器来填充。
有一个新的非常简单的解决方案:
它允许您对文本使用任何类型的输入过滤器
<input>
,包括各种数字过滤器。这将正确处理复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入的键和所有键盘布局。
请参阅此答案或在 JSFiddle 上自行尝试。
我已经使用jquery.numeric插件成功实现了许多表单。
$(document).ready(function(){
$(".numeric").numeric();
});
此外,这也适用于 textareas!
但是,请注意 Ctrl+A、Copy+Paste(通过上下文菜单)和 Drag+Drop不会按预期工作。
随着对 HTML 5 标准的更广泛支持,我们可以使用元素的pattern
属性和number
类型input
来限制仅输入数字。在某些浏览器(尤其是 Google Chrome)中,它也可以限制粘贴非数字内容。有关更多信息number
和其他较新的输入类型,请参见此处。
我认为最好的答案是上面的答案。
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, '');
}
});
这样,如果有任何按钮不会导致文本被更改,请忽略它。有了这个,你可以点击箭头并删除而不跳到最后,但它会清除任何非数字文本。
jquery.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);
}
});
上面提到的 numeric() 插件在 Opera 中不起作用(您不能退格、删除甚至使用后退或前进键)。
JQuery 或 Javascript 中的以下代码都可以完美运行(而且只有两行)。
查询:
$(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]/));
}
当然,这仅适用于纯数字输入(加上退格、删除、前进/后退键),但可以轻松更改为包括点和减号字符。
您可以使用Validation 插件及其number()方法。
$("#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)">
作为对这个建议的轻微改进,您可以使用Validation 插件及其number()、digits和range方法。例如,以下内容可确保您获得 0 到 50 之间的正整数:
$("#myform").validate({
rules: {
field: {
required: true,
number: true,
digits: true,
range : [0, 50]
}
}
});
你看不到字母神奇的外观和按键的消失。这也适用于鼠标粘贴。
$('#txtInt').bind('input propertychange', function () {
$(this).val($(this).val().replace(/[^0-9]/g, ''));
});
我首先尝试使用 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#Example 现场示例: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/
您可能有兴趣做的一些事情:
我知道标题要求 jQuery 解决方案,但希望无论如何有人会发现这很有用。
感谢戴夫·亚伦·史密斯的帖子
我编辑了您的答案以接受数字部分的小数点和数字。这项工作非常适合我。
$(".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();
}
});
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();
这个函数做同样的事情,使用了上面的一些想法。
$field.keyup(function(){
var val = $j(this).val();
if(isNaN(val)){
val = val.replace(/[^0-9\.]/g,'');
if(val.split('.').length>2) val =val.replace(/\.+$/,"");
}
$j(this).val(val);
});
/* 这是我的跨浏览器版本,
如何使用 jQuery 在 HTML 输入框中只允许数字 (0-9)?
*/
$("#inputPrice").keydown(function(e){
var keyPressed;
if (!e) var e = window.event;
if (e.keyCode) keyPressed = e.keyCode;
else if (e.which) keyPressed = e.which;
var hasDecimalPoint = (($(this).val().split('.').length-1)>0);
if ( keyPressed == 46 || keyPressed == 8 ||((keyPressed == 190||keyPressed == 110)&&(!hasDecimalPoint && !e.shiftKey)) || keyPressed == 9 || keyPressed == 27 || keyPressed == 13 ||
// Allow: Ctrl+A
(keyPressed == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(keyPressed >= 35 && keyPressed <= 39)) {
// let it happen, don't do anything
return;
}
else {
// Ensure that it is a number and stop the keypress
if (e.shiftKey || (keyPressed < 48 || keyPressed > 57) && (keyPressed < 96 || keyPressed > 105 )) {
e.preventDefault();
}
}
});
根据 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/
只需通过 parseFloat() 运行内容。它将返回NaN
无效输入。
您可以使用来自 decorplanit.com 的 autoNumeric。它们对数字以及货币、四舍五入等有很好的支持。
我在 IE6 环境中使用过,对 css 进行了一些调整,并且取得了相当大的成功。
例如,numericInput
可以定义一个 css 类,它可以用来用数字输入掩码装饰您的字段。
改编自 autoNumeric 网站:
$('input.numericInput').autoNumeric({aSep: '.', aDec: ','}); // very flexible!
如果您使用的是 HTML5,则无需费力地执行验证。只需使用 -
<input type="number" step="any" />
step 属性允许小数点有效。
我认为这是解决这个问题的好方法,而且非常简单:
$(function() {
var pastValue, pastSelectionStart, pastSelectionEnd;
$("input").on("keydown", function() {
pastValue = this.value;
pastSelectionStart = this.selectionStart;
pastSelectionEnd = this.selectionEnd;
}).on("input propertychange", function() {
var regex = /^[0-9]+\.?[0-9]*$/;
if (this.value.length > 0 && !regex.test(this.value)) {
this.value = pastValue;
this.selectionStart = pastSelectionStart;
this.selectionEnd = pastSelectionEnd;
}
});
});
示例: JSFiddle
涵盖的场景
这里大多数类似的建议至少失败了其中一个,或者需要大量代码来涵盖所有这些场景。
home
、end
和arrow
键。delete
并backspace
在任何索引处使用。keyup
未使用该事件。场景失败
0.5
并删除将不起作用。这可以通过更改正则表达式来解决/^[0-9]*\.?[0-9]*$/
,然后添加一个模糊事件以0
在文本框以小数点开头时添加 a (如果需要)。请参阅此高级方案 ,以更好地了解如何解决此问题。插入
我创建了这个简单的jquery 插件来简化它:
$("input").limitRegex(/^[0-9]+\.?[0-9]*$/);
最好的方法是在失去焦点时检查文本框的内容。
您可以使用正则表达式检查内容是否为“数字”。
或者您可以使用验证插件,它基本上会自动执行此操作。
检查此查找代码以供数据库使用:
function numonly(root){
>>var reet = root.value;
var arr1 = reet.length;
var ruut = reet.charAt(arr1-1);
>>>if (reet.length > 0){
var regex = /[0-9]|\./;
if (!ruut.match(regex)){
var reet = reet.slice(0, -1);
$(root).val(reet);
>>>>}
}
}
//Then use the even handler onkeyup='numonly(this)'
这是我刚刚完成的一个片段(使用 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;
}
});
这段代码:
我希望这对有需要的人有所帮助。
在这里找到了一个很好的解决方案http://ajax911.com/numbers-numeric-field-jquery/
我只是根据我的要求将“keyup”更改为“keydown”
将插入符号位置保留在输入上的其他方法:
$(document).ready(function() {
$('.numbersOnly').on('input', function() {
var position = this.selectionStart - 1;
fixed = this.value.replace(/[^0-9\.]/g, ''); //remove all but number and .
if(fixed.charAt(0) === '.') //can't start with .
fixed = fixed.slice(1);
var pos = fixed.indexOf(".") + 1;
if(pos >= 0)
fixed = fixed.substr(0,pos) + fixed.slice(pos).replace('.', ''); //avoid more than one .
if (this.value !== fixed) {
this.value = fixed;
this.selectionStart = position;
this.selectionEnd = position;
}
});
});
好处:
Plunker:演示工作
我刚刚找到了一个更好的插件。给你更多的控制权。假设您有一个DOB字段,您需要它是数字但也接受“/”或“-”字符。
效果很好!
$(".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 即可使用句点,尽管我认为这不是最好的方法;)
我用了这个,效果很好。。
ini=$("#id").val();
a=0;
$("#id").keyup(function(e){
var charcode = (e.which) ? e.which : e.keyCode;
// for decimal point
if(!(charcode===190 || charcode===110))
{ // for numeric keys andcontrol keys
if (!((charcode>=33 && charcode<=57) ||
// for numpad numeric keys
(charcode>=96 && charcode<=105)
// for backspace
|| charcode==8))
{
alert("Sorry! Only numeric values allowed.");
$("#id").val(ini);
}
// to include decimal point if first one has been deleted.
if(charcode===8)
{
ini=ini.split("").reverse();
if(ini[0]==".")
a=0;
}
}
else
{
if(a==1)
{
alert("Sorry! Second decimal point not allowed.");
$("#id").val(ini);
}
a=1;
}
ini=$("#id").val();
});
find keycodes at http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
这很简单,我们已经有一个 javascript 内置函数“isNaN”。
$("#numeric").keydown(function(e){
if (isNaN(String.fromCharCode(e.which))){
return false;
}
});
jquery.numeric插件也适用于我。
我唯一不喜欢的就是直觉。按键在没有任何反馈给用户的情况下被“禁止”,用户可能会变得偏执或怀疑他的键盘是否坏了。
我向插件添加了第二个回调,以便对阻塞输入进行简单的反馈:
$('#someInput').numeric(
null, // default config
null, // no validation onblur callback
function(){
// for every blocked keypress:
$(this).effect("pulsate", { times:2 }, 100);
}
);
当然,这只是一个示例(使用 jQuery UI)。任何简单的视觉反馈都会有所帮助。
我使用该功能,它工作正常
$(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;
}
});
});
我使用了 James Nelli 的答案并添加了 onpaste="return false;" (Håvard Geithus) 确保仅在输入中输入整数。即使您尝试粘贴,它也不允许。
有一个名为Jquery Mask Plugin的不错的 jquery 插件 ,它旨在为表单字段和 html 元素制作掩码,但您也可以使用它来简单地定义可以在字段内键入的数据类型:
$('.numeric-input').mask('0#');
现在,您的表单字段中只允许使用数字。
使用按键事件
- 数组法
var asciiCodeOfNumbers = [48, 49, 50, 51, 52, 53, 54, 54, 55, 56, 57]
$(".numbersOnly").keypress(function (e) {
if ($.inArray(e.which, asciiCodeOfNumbers) == -1)
e.preventDefault();
});
- 直接法
$(".numbersOnly").keypress(function (e) {
if (e.which < 48 || 57 < e.which)
e.preventDefault();
});
此代码属于限制文本框中的字母,必须在按键事件中输入唯一数字验证。希望对您有所帮助
HTML 标签:
<input id="txtPurchaseAmnt" style="width:103px" type="text" class="txt" maxlength="5" onkeypress="return isNumberKey(event);" />
函数只有数字(键){
var keycode = (key.which) ? key.which : key.keyCode
if ((keycode > 47 && keycode < 58) || (keycode == 46 || keycode == 8) || (keycode == 9 || keycode == 13) || (keycode == 37 || keycode == 39)) {
return true;
}
else {
return false;
}
}
也允许负数
以下代码也接受负数
HTML
<input type="text" name="myText" />
JS
var pastValue, pastSelectionStart, pastSelectionEnd;
$("input").on("keydown", function() {
pastValue = this.value;
pastSelectionStart = this.selectionStart;
pastSelectionEnd = this.selectionEnd;
}).on("input propertychange", function() {
if ( this.value.length > 0 && $.isNumeric(this.value) == false && this.value != '-' ) {
this.value = pastValue;
this.selectionStart = pastSelectionStart;
this.selectionEnd = pastSelectionEnd;
}
}).on('blur', function(){
if(this.value == '-')
this.value = '';
});
我有这段代码可以很好地完成这项工作。
var prevVal = '';
$(".numericValue").on("input", function (evt) {
var self = $(this);
if (self.val().match(/^-?\d*(\.(?=\d*)\d*)?$/) !== null) {
prevVal = self.val()
} else {
self.val(prevVal);
}
if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57) && (evt.which != 45 && self.val().indexOf("-") == 0)) {
evt.preventDefault();
}
});
您可以通过添加模式对文本输入使用 HTML5 验证。无需使用 regex 或 keyCodes 手动验证。
<input type="text" pattern="[0-9.]+" />
$("input[type=text][pattern]").on("input", function () {
if (!this.checkValidity())
this.value = this.value.slice(0, -1);
});
有关输入 [type=number] 的解决方案,请在此处查看我的完整答案
请在脚本底部添加:
if(this.value.length == 1 && this.value == 0)
this.value = "";