如何使用jQuery仅允许HTML输入框中的数字（0-9）？-Java 学习之路

827

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

我怎么能用jQuery做到这一点？

30 回答

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

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

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

回复于 2024-05-14T12:25:52+08:00

7
您可以尝试HTML5 number输入：
```
<input type="number" value="0" min="0">
```
对于不兼容的浏览器，有Modernizr和Webforms2回退 .
回复于 2024-05-14T12:25:52+08:00
6
使用JavaScript函数isNaN，
```
if (isNaN($('#inputid').val()))
```
if（isNaN（document.getElementById（'inputid'） . val（）））
```
if (isNaN(document.getElementById('inputid').value))
```
Update: 这里有一篇很好的文章谈论它但使用jQuery：Restricting Input in HTML Textboxes to Numeric Values
回复于 2024-05-14T12:25:52+08:00

简短而甜蜜 - 即使在30个答案后也不会引起太多关注;）

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

回复于 2024-05-14T12:25:52+08:00

这是一个使用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;
    }
});

回复于 2024-05-14T12:25:52+08:00

您可以使用简单的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();
    }

回复于 2024-05-14T12:25:52+08:00

我也想回答:)

$('.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);
    });

就是这样......只是数字 . :)它几乎可以与'模糊'一起工作，但......

回复于 2024-05-14T12:25:52+08:00

对我来说更简单的是

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

回复于 2024-05-14T12:25:52+08:00

我根据@ 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;
        }
    });
});

回复于 2024-05-14T12:25:52+08:00

99
只需要在Jquery中应用此方法，您就可以将文本框验证为仅接受数字 .
```
function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp); 
}
```
试试这个解决方案here
回复于 2024-05-14T12:25:52+08:00

165

这是我使用的功能：

// 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();

回复于 2024-05-14T12:25:52+08:00

您可以使用这个非常简单的解决方案来做同样的事情

$("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" />

我提到了this link的解决方案 . 它完美地工作！

回复于 2024-05-14T12:25:52+08:00

这似乎牢不可破 .

// 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));
});

回复于 2024-05-14T12:25:52+08:00

您可能希望允许标签：

$("#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(); 
        }   
    }
});

回复于 2024-05-14T12:25:52+08:00

需要确保您的数字键盘和标签键也可以正常工作

// 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();
                }
            }

回复于 2024-05-14T12:25:52+08:00

5
jQuery

以下脚本中的 inputFilter 插件允许您在文本 <input> 上使用 any 种输入过滤器，包括各种数字过滤器 . 这将正确处理复制粘贴，拖放，键盘快捷键，上下文菜单操作，不可键入的键和所有键盘布局 . 作品cross-browser and on mobile, IE 9+ . Note that you still must do server side validation!

亲自尝试on JSFiddle .
```
// Restricts input for each element in the set of matched elements to the given inputFilter.
(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);
      }
    });
  };
}(jQuery));
```
用法：
```
// Restrict input to digits only by using a regular expression filter.
$("#myTextBox").inputFilter(function(value) {
  return /^\d*$/.test(value);
});
```
您可能希望用于输入过滤的一些正则表达式：
- /^-?\d*$/ 将输入限制为 integer 数字
- /^\d*$/ 将输入限制为 unsigned integer 个数字
- /^[0-9a-f]*$/i 将输入限制为 hexadecimal 数字
- /^-?\d*[.,]?\d*$/ 将输入限制为 floating point 数字（允许 . 和 , 作为小数分隔符）
- /^-?\d*[.,]?\d{0,2}$/ 将输入限制为 currency 值（即最多两位小数）
您可能还想使用输入过滤器将输入限制为例如整数值高达1500：
```
$("#myTextBox").inputFilter(function(value) {
  return /^\d*$/.test(value) && (value === "" || parseInt(value) <= 1500);
});
```
纯JavaScript

实际上并不需要jQuery，你也可以用纯JavaScript做同样的事情 .

亲自尝试on JSFiddle .

HTML 5

HTML 5具有 <input type="number"> 的原生解决方案（请参阅specification），但请注意browser support varies . 例如，Firefox（从版本63.0.3开始）仍然允许用户在该字段中输入文本 .

亲自尝试on w3schools.com .

更复杂的验证选项

如果你想做一些其他验证的点点滴滴，这可能很方便：
回复于 2024-05-14T12:25:52+08:00

function suppressNonNumericInput（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
    }
}

回复于 2024-05-14T12:25:52+08:00

8
这是我前一段时间创建的快速解决方案 . 你可以在我的文章中阅读更多相关内容：

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);
});
```
回复于 2024-05-14T12:25:52+08:00

我想帮助一点，我制作了我的版本 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 =”return onlyNumbers（event）“...”并且您已完成;）

回复于 2024-05-14T12:25:52+08:00

我认为这对每个人都有帮助

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

回复于 2024-05-14T12:25:52+08:00

26
你可以使用像这样的输入事件：
```
$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});
```
但是，这个代码特权是什么？
- 适用于移动浏览器（keydown和keyCode有问题） .
- 它也适用于AJAX生成的内容，因为我们正在使用"on" .
- 比keydown更好的性能，例如在paste事件上 .
回复于 2024-05-14T12:25:52+08:00
11
您可以尝试输入HTML5号码：
```
<input type="number" placeholder="enter the number" min="0" max="9">
```
此输入标记元素现在仅在0到9之间取值，因为min属性设置为0，max属性设置为9 .

有关访问http://www.w3schools.com/html/html_form_input_types.asp的更多信息
回复于 2024-05-14T12:25:52+08:00

129

我找到了一个非常好的简单解决方案，它不会像其他解决方案那样阻止用户选择文本或复制粘贴 . 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

回复于 2024-05-14T12:25:52+08:00

6
为什么这么复杂？你甚至不需要jQuery，因为有一个HTML5模式属性：
```
<input type="text" pattern="[0-9]*">
```
很酷的是，它在移动设备上显示了一个数字键盘，这比使用更好jQuery的 .
回复于 2024-05-14T12:25:52+08:00

您可以使用此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()"/>

回复于 2024-05-14T12:25:52+08:00

$(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

回复于 2024-05-14T12:25:52+08:00

1156

排队：

<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">

回复于 2024-05-14T12:25:52+08:00

27
我在内部常见的js文件中使用它 . 我只是将类添加到需要此行为的任何输入 .
```
$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
```
回复于 2024-05-14T12:25:52+08:00

使用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)');

回复于 2024-05-14T12:25:52+08:00

25
HTML5中的pattern属性指定了一个正则表达式，该元素的值将被检查 .
```
<input  type="text" pattern="[0-9]{1,3}" value="" />
```
注意：pattern属性使用以下输入类型：text，search，url，tel，email和password .
- [0-9]可以替换为任何正则表达式条件 .
- {1,3}表示最小值为1，最多可输入3位数 .
回复于 2024-05-14T12:25:52+08:00

如何使用jQuery仅允许HTML输入框中的数字（0-9）？

30 回答

jQuery

纯JavaScript

HTML 5

更复杂的验证选项

相关问题