如何使用jQuery在HTML输入框中仅允许数字(0-9)?


901

我正在创建一个网页,其中有一个输入文本字段,我只允许在其中输入数字字符,例如(0,1,2,3,4,5 ... 9)0-9。

我该如何使用jQuery?


73
请记住,您不能依赖客户端验证-您还需要在服务器上进行验证,以防用户关闭JavaScript或未使用与JavaScript兼容的浏览器。
cjk

45
你考虑过html5吗?<input type =“ number” />。具有min和max属性,您也可以限制输入
ZX12R 2012年

5
我认为您应该检查keyup事件上的输入值,而不要检查键码,因为跨键盘差异和非键盘差异更可靠。
理查德(Richard)

13
我与理查德完全同意:千万不能使用键码。例如,接受的答案在法语键盘上不起作用,因为您需要按“ Shift”以在这些键盘上键入数字。密码太危险了,恕我直言。
MiniQuark 2012年

3
@ ZX12R在任何当前版本的IE中均不起作用。在自己的东西上使用最新的代码来保持新鲜是很好的,但是对于几乎所有专业项目而言,这并不是一个真正的选择。caniuse.com/#feat=input-number
Eric

Answers:


1259

注意:这是更新的答案。下面的注释指的是一个旧版本,其中包含了密钥代码。

jQuery的

在JSFiddle上尝试一下。

对此没有原生的jQuery实现,但是您可以<input>使用以下inputFilter插件过滤文本的输入值(支持Copy + Paste,Drag + Drop,键盘快捷键,上下文菜单操作,不可键入的键,插入符号位置,其他键盘布局以及IE 9以后的所有浏览器):

// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  };
}(jQuery));

您现在可以使用inputFilter插件安装输入过滤器:

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

有关更多输入过滤器示例,请参见JSFiddle演示。另请注意,您仍然必须执行服务器端验证!

纯JavaScript(无jQuery)

实际上并不需要jQuery,您也可以使用纯JavaScript做同样的事情。看到这个答案

HTML 5

HTML 5提供了本机解决方案<input type="number">(请参见规范),但是请注意,浏览器支持有所不同:

  • 大多数浏览器将仅在提交表单时验证输入,而不在键入时验证输入。
  • 大多数移动浏览器不支持stepminmax属性。
  • Chrome(版本71.0.3578.98)仍然允许用户输入字符eE输入字段。也看到这个问题
  • Firefox(版本64.0)和Edge(EdgeHTML版本17.17134)仍然允许用户在字段中输入任何文本。

在w3schools.com上尝试一下。


45
谢谢!event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 190,如果您想要小数位
Michael L Watson

9
添加keyCodes 37和39,以允许在txt框中进行左右箭头导航:if(event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39)
安东尼·皇后

22
哦,刚刚从我们的测试人员那里得到了一个问题。您必须防止用户按住shift键并按下数字键,否则输入将允许!@#$%^&*()
Allen Rice

6
确认了shift +错误。此外,ALT +数字键盘几乎可以执行任何操作(即Alt + 321 = A,Alt + 322 = B等)。服务器端验证的另一种情况。
安东尼·皇后

140
我真的不同意这个答案:使用键码确实太冒险了,因为您不确定键盘布局是什么。例如,在法语键盘上,用户必须按Shift才能键入数字。因此,此代码根本无法工作。因此,请进行验证,而不要使用此键控代码。
MiniQuark 2012年

182

这是我使用的功能:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

然后,您可以通过执行以下操作将其附加到您的控件:

$("#yourTextBoxName").ForceNumericOnly();

2
我发现这很有用,但发现了一个讨厌的“ bug”。当我在iMac上使用它时,它允许输入一些字母,例如a和e。似乎PC上的键盘数字是iMac上的字母,而Mac键盘与常规数字相同。有谁知道如何使其在Mac和PC上都能正常工作?
Volmar

3
键“ Home”,“ End”也不起作用。这是一个更好的解决方案彼得建议:west-wind.com/weblog/posts/2011/Apr/22/...
BMAN

为什么会有一个return this.each(function()
powtac's

2
@powtac-因此您可以在多个对象上调用.ForceNumericOnly()。例如... $(“ input [type ='text']”)。ForceNumericOnly()
Oliver Pearmain 2011年

1
@powtac the eachfrom return this.each(function()是允许如HaggleLad所说的多个对象,return部分是将jQuery对象返回给调用者,以允许链接,例如$("input[type='text'").ForceNumericOnly().show()
Jose Rui Santos

149

排队:

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

简洁的风格(使用jQuery):

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">


2
即使用户按下左箭头键,这也将插入符号移到末尾。
Phrogz

1
@phrogz,试试这个:onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')"
Patrick Fisher 2012年

这可以完美地工作,并且可以防止Shift + number的出现,与上面的操作不同。
Nick Hartley 2012年

5
@ mhenry1384这是预期的行为。我发现它是不错的反馈,但是如果您不喜欢它,那么关键代码就是您要寻找的方法。
Patrick Fisher

2
您可以修改以/[^0-9]|^0+(?!$)/g防止前导零序列。
Johny Skovdal

105

您可以只使用一个简单的JavaScript正则表达式来测试纯数字字符:

/^[0-9]+$/.test(input);

如果输入为数字,则返回true;否则,返回false。

或事件键码,请在下面简单使用:

     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }

11
有关此方法的实现,请参见我的答案。
Patrick Fisher

检查数字按键而不是检查正则表达式会花费更少的处理器时间吗?
andrsnn 2014年

87

您可以像这样在输入事件上使用:

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

但是,此代码特权是什么?

  • 它可以在移动浏览器上运行(keydown和keyCode有问题)。
  • 它也适用于AJAX生成的内容,因为我们使用的是“ on”。
  • 比击键更好的性能,例如粘贴事件。

6
我觉得这是一个比公认答案更健壮(和更简单)的解决方案。
杰里米·哈里斯

如果使用replace(/ \ D / g,``)
则更简单

嗨,我如何确保decimal介于0.0到之间的数值24.0我无法让它输入.
变压器

我建议使用this.value = Number(this.value.replace(/\D/g, ''));
HasanG

好的答案,可以通过切换类轻松切换输入是否为数字
raklos

55

简短而甜美-即使经过30多个答案也永远不会引起太多关注;)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });

5
我将用输入替换键盘输入,否则您可以保持按下字母的状态,然后单击以将焦点移出文本框,而文本保持原样。输入确保不会发生这种情况
WizLiz

感谢正则表达式-但这是一个更好的事件处理程序:$('#number_only')。on('input propertychange',function(){this.value = this.value.replace(/ [^ 0-9] /G, ''); });
BradM

3
仅供参考-这个问题并没有要求,但这不允许小数点(例如12.75)。绑定“输入”而不是“键盘”可以使UX更加流畅,而不是瞬间看到他们的角色,然后将其删除。
保罗

44

使用JavaScript函数isNaN

if (isNaN($('#inputid').val()))

如果(isNaN(document.getElementById('inputid')。val()))

if (isNaN(document.getElementById('inputid').value))

更新: 这是一篇很好的文章,但使用jQuery进行了讨论:将HTML文本框中的输入限制为数值


40
好吧……“不使用JQuery”,除了示例中使用JQuery的部分……
GalacticCowboy 2010年

document.getElementById('inputid').val()老兄..那仍然是jQuery。.val()是一个jQuery的东西。使用.value
mpen 2011年


嗨,我怎么能保证数值与一decimal0.024.0我不能让它进入.
变压器

28
$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

资料来源:http : //snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values


6
哇,空的“如果”方块和魔幻数字都!我只是吐了一点口。:D但是,认真的说,当您只需要将输入与正则表达式/^[.\d]+$/相匹配时,为什么还要解决所有这些麻烦呢?“ 8”代表什么?
艾伦·摩尔

@Alan:哈哈,我不知道-我直接从源代码中复制。我会改写“ if(event.keyCode!= 46 && event.keyCode!= 8)”,或者按照您所说的使用正则表达式。我想8代表删除键。
伊瓦(Ivar)2009年

4
例如,尝试按Shift + 8-您的验证将使*进入
Anton 2010年

很好。如果可以处理Shift键和数字(特殊字符,如!@#$%^ ..)
Shyju,2010年

27

我在我们内部的通用js文件中使用它。我只是将类添加到需要此行为的任何输入中。

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});

1
漂亮,优雅且有用的代码!谢谢。但是您必须添加keyup和keydown事件。
Silvio Delgado

25

对我来说更简单的是

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});

7
只需确保您使用的this.value.replace(/[^0-9\.]/g,'');是OP的0-9要求
即可-Chalise

24

为什么这么复杂?您甚至不需要jQuery,因为有一个HTML5模式属性:

<input type="text" pattern="[0-9]*">

最酷的是,它在移动设备上启动了数字键盘,这比使用jQuery更好。


2
这应该有更多的选票。如果有的话,您还可以为非html5浏览器添加一个后备正则表达式-但无论如何都应在服务器端处理数据验证。
马库斯2015年

看起来目前大多数浏览器都很好地支持它,所以modernizr的支持并不是那么重要:caniuse.com/#search=pattern Safari可以很好地工作,即使该站点上列出了Safari的部分支持。尝试一下!
来宾

@guest非常感谢您。最快,最简单的答案!我认为最佳答案。
BinaryJoe01

18

您可以使用此非常简单的解决方案来完成此操作

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

我指的是该链接的解决方案。它完美地工作!!!


也许允许/\d|\./更好。十进制数字
Zango 2014年

这在crome上很完美。但不是在Mozilla FireFox中
Kirataka

嗨,我如何确保decimal介于0.0到之间的数值24.0我无法让它输入.
变压器

不适用于复制粘贴
上午


14

HTML5中的pattern属性指定用于检查元素值的正则表达式。

  <input  type="text" pattern="[0-9]{1,3}" value="" />

注意:pattern属性适用于以下输入类型:文本,搜索,URL,电话,电子邮件和密码。

  • [0-9]可以用任何正则表达式条件替换。

  • {1,3}代表最小1位数,最大3位数可以输入。


嗨,我如何确保decimal介于0.0到之间的数值24.0我无法让它输入.
变压器

1
@transformer试试这个<input type =“ number” pattern =“ [0-9] +([\。,] [0-9] +)?” step =“ 0.01”>
vickisys

11

使用jQuery.validate相当简单

$(document).ready(function() {
    $("#formID").validate({
        rules: {
            field_name: {
                numericOnly:true
            }
        }
    });
});

$.validator.addMethod('numericOnly', function (value) {
       return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');

8

函数preventNonNumericInput(event){

    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
}

嗨,我如何确保decimal介于0.0到之间的数值24.0我不能让它进入.
变压器

8

我想到了一个非常好的简单解决方案,它不会像其他解决方案那样阻止用户选择文本或复制粘贴。jQuery样式:)

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server

嘿,我在用这个,但我真正要寻找的是让他像这样1.2或
3.455

8

您可以使用以下JavaScript函数:

function maskInput(e) {
    //check if we have "e" or "window.event" and use them as "event"
        //Firefox doesn't have window.event 
    var event = e || window.event 

    var key_code = event.keyCode;
    var oElement = e ? e.target : window.event.srcElement;
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {

            if (key_code > 95)
                 key_code -= (95-47);
            oElement.value = oElement.value;
        } else if(key_code == 8) {
            oElement.value = oElement.value;
        } else if(key_code != 9) {
            event.returnValue = false;
        }
    }
}

您可以像这样将其绑定到文本框:

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

我在生产中使用了上面的方法,并且效果很好,并且是跨浏览器的。此外,它不依赖jQuery,因此您可以使用内联JavaScript将其绑定到文本框:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>

当有人在输入中粘贴非数字文本时,此操作将失败。有什么想法可以克服这个问题吗?我不能对此决定。
Kiran Ruth R

7

我认为这会帮助每个人

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
  })

您会忘记键盘输入。其中包括:if(event.which!=8 && event.which!=0 && (event.which<48 || event.which>57) && (event.which<96 || event.which>105)) return;
tomvo 2013年

6

我根据上面@ user261922的帖子写了我的文章,对其进行了稍微的修改,以便可以选择所有选项卡,并且可以处理同一页面上的多个“仅数字”字段。

var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});

6

这是我前段时间创建的快速解决方案。您可以在我的文章中阅读有关它的更多信息:

http://ajax911.com/numbers-numeric-field-jquery/

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});

6

您需要允许选项卡:

$("#txtboxToFilter").keydown(function(event) {
    // Allow only backspace and delete
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
        // let it happen, don't do anything
    }
    else {
        // Ensure that it is a number and stop the keypress
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

6

这是使用jQuery UI Widget工厂的答案。您可以轻松自定义允许使用哪些字符。

$('input').numberOnly({
    valid: "0123456789+-.$,"
});

那将允许数字,数字符号和美元数量。

$.widget('themex.numberOnly', {
    options: {
        valid : "0123456789",
        allow : [46,8,9,27,13,35,39],
        ctrl : [65],
        alt : [],
        extra : []
    },
    _create: function() {
        var self = this;

        self.element.keypress(function(event){
            if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
            {
                return;
            }
            if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
            {
                return;
            }
            if(event.altKey && self._codeInArray(event,self.options.alt))
            {
                return;
            }
            if(!event.shiftKey && !event.altKey && !event.ctrlKey)
            {
                if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                {
                    return;
                }
            }
            event.preventDefault(); 
        });
    },

    _codeInArray : function(event,codes) {
        for(code in codes)
        {
            if(event.keyCode == codes[code])
            {
                return true;
            }
        }
        return false;
    }
});

这样可以确保$,然后+-作为第一个或第一个/第二个字符,然后只有一个小数点吗?
戈登

6

这似乎是坚不可摧的。

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

5

需要确保您也使用数字小键盘和Tab键

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }

5

我想提供一些帮助,并制作了我的版本,onlyNumbers功能...

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

只需添加输入标签“ ... input ... id =“ price” onkeydown =“返回onlyNumbers(event)” ...“,就可以完成;)


5

我也想回答:)

    $('.justNum').keydown(function(event){
        var kc, num, rt = false;
        kc = event.keyCode;
        if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
        return rt;
    })
    .bind('blur', function(){
        num = parseInt($(this).val());
        num = isNaN(num) ? '' : num;
        if(num && num < 0) num = num*-1;
        $(this).val(num);
    });

就是...只是数字。:)几乎可以与'blur'一起使用,但是...


5

检查输入值是否为数字的简单方法是:

var checknumber = $('#textbox_id').val();

    if(jQuery.isNumeric(checknumber) == false){
        alert('Please enter numeric value');
        $('#special_price').focus();
        return;
    }

5

只需在Jquery中应用此方法,即可验证文本框以仅接受数字。

function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp); 
}

在这里尝试此解决方案


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.