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

我如何使用jQuery做到这一点?


当前回答

使用JavaScript函数isNaN,

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

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

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

更新: 这里有一篇很好的文章谈论它,但使用jQuery:限制输入在HTML文本框的数值

其他回答

这里有两种不同的方法:

允许有小数点的数值 允许没有小数点的数值

方法1:

$ (" # approach1”)。上(“keypress keyup blur”,function (e) (这个美元)。瓦尔(这)。瓦尔(美元)。replace(0 - 9 \。- [^]/ g,”); 如果(e .哪! = 46 | |美元(这)。瓦尔indexOf()。 ('.') != - 1) &&(事件)。哪种< 48 | |事件。哪个> 57) 事件。preventDefault (); 的 }); <剧本剧本src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < / > <h2>Numeric与decimal point</h2><br/> <跨越>输入数量< /跨越> <输入类型=“文本”

方法2:

$ (" # approach2”)。上(“keypress keyup blur”,功能(事件) (这个美元)。瓦尔(这)。瓦尔(美元)。replace (- [^ \ d]。+ -”、“); 如果(事件。哪种< 48 | |事件。哪个> 57) 事件。preventDefault (); 的 }); <剧本剧本src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < / > <h2>Numeric without decimal point</h2><br/> <跨越>输入数量< /跨越> <输入类型=“文本”

你可以尝试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

我把所有的答案结合在一起,得出了以下代码:

jQuery('#input_id', function(e){
    // Allow: backspace, delete, tab, escape, enter
    if (jQuery.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode === 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && e.ctrlKey === true) ||
        // Disallow several dots (allow 190 only if no dots found)
        (e.keyCode === 190 && jQuery(this).val().indexOf('.') == -1) ||
        // Bug in some Android devices where it is always 229
        (e.keyCode === 229) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        // let it happen, don't do anything
        return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

此外,表单应该有autocomplete="off"。如果没有这个选项,你可能会在移动设备上遇到自动补全算法的问题。

下面是一个使用jQuery UI小部件工厂的答案。您可以轻松地自定义允许的字符。

$('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;
    }
});
$(document).ready(function()
{
    $("#textBoxId").bind("change",checkInput);
});

function checkInput()
{
    // check if $('#textBoxId').val() is under your constraints
    // then change its value, removing the last character
    // since this event will be called each time you
    // type a character
}