输入字段，只有数字 jquery/js

Question

我有一个输入字段，我只希望用户输入数字

html: <input id="num" type="text" name="page" size="4" value="" />

jQuery/js：

 $("#num").keypress(function (e){
      if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)){
        return false;
      }
});

希望可以有人帮帮我。

顺便说一句：我对使用更大的 jquery 插件来使该功能起作用不感兴趣。 （我找到了一些 jquery-plugins ，但必须有其他方法来修复它，代码更小）

Answer 1

试试这个：

$("#num").keypress(function (e){
  var charCode = (e.which) ? e.which : e.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    return false;
  }
});

值 48 到 57 代表数字 0-9。

Answer 2

永远不要这样做。 用户无需按键即可更新文本框。 他可以复制粘贴，拖动。 一些文字。

这也会使用户感到恼火。

只需在文件后面显示一个标签，说明它只接受数字。 接着

在提交时验证您的代码

Answer 3

与当前的最佳答案相比，此代码更加用户友好 - 它允许使用箭头、退格、删除和其他键/组合：

// Ensures that it is a number and stops the key press
$('input[name="number"]').keydown(function(event) {
    if (!(!event.shiftKey //Disallow: any Shift+digit combination
            && !(event.keyCode < 48 || event.keyCode > 57) //Disallow: everything but digits
            || !(event.keyCode < 96 || event.keyCode > 105) //Allow: numeric pad digits
            || event.keyCode == 46 // Allow: delete
            || event.keyCode == 8  // Allow: backspace
            || event.keyCode == 9  // Allow: tab
            || event.keyCode == 27 // Allow: escape
            || (event.keyCode == 65 && (event.ctrlKey === true || event.metaKey === true)) // Allow: Ctrl+A
            || (event.keyCode == 67 && (event.ctrlKey === true || event.metaKey === true)) // Allow: Ctrl+C
            //Uncommenting the next line allows Ctrl+V usage, but requires additional code from you to disallow pasting non-numeric symbols
            //|| (event.keyCode == 86 && (event.ctrlKey === true || event.metaKey === true)) // Allow: Ctrl+Vpasting 
            || (event.keyCode >= 35 && event.keyCode <= 39) // Allow: Home, End
            )) {
        event.preventDefault();
    }
});

注意： Mac 用户需要event.metaKey === true （感谢RyanM注意到这一点）。 此外，如果您取消注释 Ctrl+V 序列，您将需要编写额外的代码来检查粘贴的文本（禁止使用非数字符号）。

Answer 4

这是我的解决方案：

function InputValidator(input, validationType, validChars) {
if (input === null || input.nodeType !== 1 || input.type !== 'text' && input.type !== 'number')
    throw ('Please specify a valid input');

if (!(InputValidator.ValidationType.hasOwnProperty(validationType) || validationType))
    throw 'Please specify a valid Validation type';

input.InputValidator = this;

input.InputValidator.ValidCodes = [];

input.InputValidator.ValidCodes.Add = function (item) {
    this[this.length] = item;
};

input.InputValidator.ValidCodes.hasValue = function (value, target) {
    var i;
    for (i = 0; i < this.length; i++) {
        if (typeof (target) === 'undefined') {
            if (this[i] === value)
                return true;
        }
        else {
            if (this[i][target] === value)
                return true;
        }
    }

    return false;
};

var commandKeys = {
    'backspace': 8,
    'tab': 9,
    'enter': 13,
    'shift': 16,
    'ctrl': 17,
    'alt': 18,
    'pause/break': 19,
    'caps lock': 20,
    'escape': 27,
    'page up': 33,
    'page down': 34,
    'end': 35,
    'home': 36,
    'left arrow': 37,
    'up arrow': 38,
    'right arrow': 39,
    'down arrow': 40,
    'insert': 45,
    'delete': 46,
    'left window key': 91,
    'right window key': 92,
    'select key': 93,
    /*creates Confusion in IE */
    //'f1': 112,
    //'f2': 113,
    //'f3': 114,
    //'f4': 115,
    //'f5': 116,
    //'f6': 117,
    //'f7': 118,
    //'f8': 119,
    //'f9': 120,
    //'f10': 121,
    //'f11': 122,
    //'f12': 123,
    'num lock': 144,
    'scroll lock': 145,
};

commandKeys.hasValue = function (value) {
    for (var a in this) {
        if (this[a] === value)
            return true;
    }

    return false;
};

function getCharCodes(arrTarget, chars) {
    for (var i = 0; i < chars.length; i++) {
        arrTarget.Add(chars[i].charCodeAt(0));
    }
}

function triggerEvent(name, element) {
    if (document.createEventObject) {
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on' + name, evt)
    }
    else {
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(name, true, true); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

if (validationType == InputValidator.ValidationType.Custom) {
    if (typeof (validChars) === 'undefined')
        throw 'Please add valid characters';

    getCharCodes(input.InputValidator.ValidCodes, validChars);
}
else if (validationType == InputValidator.ValidationType.Decimal) {
    getCharCodes(input.InputValidator.ValidCodes, '0123456789.');
}
else if (validationType == InputValidator.ValidationType.Numeric) {
    getCharCodes(input.InputValidator.ValidCodes, '0123456789');
}

input.InputValidator.ValidateChar = function (c) {
    return this.ValidCodes.hasValue(c.charCodeAt(0));
}

input.InputValidator.ValidateString = function (s) {
    var arr = s.split('');

    for (var i = 0; i < arr.length; i++) {
        if (!this.ValidateChar(arr[i])) {
            arr[i] = '';
        }
    }

    return arr.join('');
}

function bindEvent(el, eventName, eventHandler) {
    if (el.addEventListener) {
        el.addEventListener(eventName, eventHandler, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + eventName, eventHandler);
    }
}

function getCaretPosition(i) {
    if (!i) return;

    if ('selectionStart' in i) {
        return i.selectionStart;
    }
    else {
        if (document.selection) {
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -i.value.length);
            return sel.text.length - selLen;
        }
    }
}

function setCursor(node, pos) {
    var node = (typeof (node) === "string" || node instanceof String) ? document.getElementById(node) : node;

    if (!node) {
        return false;
    }
    else if (node.createTextRange) {
        var textRange = node.createTextRange();
        textRange.collapse(true);
        textRange.moveEnd(pos);
        textRange.moveStart(pos);
        textRange.select();
        return true;
    } else if (node.setSelectionRange) {
        node.setSelectionRange(pos, pos);
        return true;
    }

    return false;
}

function validateActive() {
    if (input.isActive) {
        var pos = getCaretPosition(input);

        var arr = input.value.split('');

        for (var i = 0; i < arr.length; i++) {
            if (!this.ValidateChar(arr[i])) {
                arr[i] = '';

                if (pos > i)
                    pos--;
            }
        }
        console.log('before : ' + input.value);

        input.value = arr.join('');
        console.log('after : ' + input.value, input);
        setCursor(input, pos);

        setTimeout(validateActive, 10);
    }
}

bindEvent(input, 'keypress', function (e) {
    var evt = e || window.event;
    var charCode = evt.which || evt.keyCode;

    if (!input.InputValidator.ValidCodes.hasValue(charCode) && !commandKeys.hasValue(charCode)) {
        if (evt.preventDefault) {
            evt.preventDefault();
            evt.stopPropagation();
        }
        return false;
    }
});

bindEvent(input, 'keyup', function (e) {
    var evt = e || window.event;
    var charCode = evt.which || evt.keyCode;

    if (!input.InputValidator.ValidCodes.hasValue(charCode) && !commandKeys.hasValue(charCode)) {
        if (evt.preventDefault) {
            evt.preventDefault();
            evt.stopPropagation();
        }
        return false;
    }
});

bindEvent(input, 'change', function (e) {
    var dt = input.value;

    input.value = input.InputValidator.ValidateString(input.value);

    if (input.value !== dt)
        triggerEvent('change', input);
});

bindEvent(input, 'blur', function (e) {
    var dt = input.value;
    input.value = input.InputValidator.ValidateString(input.value);

    input.isActive = false;

    if (input.value !== dt)
        triggerEvent('blur', input);
});

bindEvent(input, 'paste', function (e) {
    var evt = e || window.event;
    var svt = input.value;

    if (evt && evt.clipboardData && evt.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
        if (/text\/html/.test(evt.clipboardData.types)) {
            var dt = evt.clipboardData.getData('text/html');

            input.value = input.InputValidator.ValidateString(dt);
            if (input.value !== dt)
                triggerEvent('change', input);
        }
        else if (/text\/plain/.test(e.clipboardData.types)) {
            var dt = evt.clipboardData.getData('text/plain');

            input.value = input.InputValidator.ValidateString(dt);
            if (input.value !== dt)
                triggerEvent('change', input);
        }
        else {
            input.value = '';
        }
        waitforpastedata(input, svt);
        if (e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
        return false;
    }
    else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
        input.value = '';
        waitforpastedata(input, svt);
        return true;
    }
});

bindEvent(input, 'select', function (e) {
    var evt = e || window.event;

    if (evt.preventDefault) {
        evt.preventDefault();
        evt.stopPropagation();
    }
    return false;
});

bindEvent(input, 'selectstart', function (e) {
    var evt = e || window.event;

    if (evt.preventDefault) {
        evt.preventDefault();
        evt.stopPropagation();
    }
    return false;
});

/* no need to validate wile active,
   removing F keys fixed IE compatability*/
//bindEvent(input, 'fucus', function (e) {
//    input.isActive = true;
//    validateActive();
//});

//validate current value of the textbox
{
    var dt = input.value;
    input.value = input.InputValidator.ValidateString(input.value);

    //trigger event to indicate value has changed
    if (input.value !== dt)
        triggerEvent('change', input);
}

function waitforpastedata(elem, savedcontent) {
    if (elem.value !== '') {
        var dt = input.value;
        elem.value = elem.InputValidator.ValidateString(elem.value);

        if (input.value !== dt)
            triggerEvent('change', input);
    }
    else {
        var that = {
            e: elem,
            s: savedcontent
        }
        that.callself = function () {
            waitforpastedata(that.e, that.s)
        }
        setTimeout(that.callself, 10);
    }
}
}

InputValidator.ValidationType = new (function (types) {
    for (var i = 0; i < types.length; i++) {
        this[types[i]] = types[i];
    }
})(['Numeric', 'Custom', 'Decimal']);

要将其应用于输入，请执行以下操作：

new InputValidator(document.getElementById('txtValidate'), InputValidator.ValidationType.Decimal);/* Numeric or Custom */

如果您指定 Custom 作为验证类型，则必须指定有效字符。 例如：

new InputValidator(document.getElementById('txtValidate'), InputValidator.ValidationType.Custom,'1234abc');

Answer 5

这是我的代码：

$("Input.onlyNumbersInput").live('input', function (event) {

            $(this).val($(this).val().replace(/[^0-9]/g, ''));

});

使用“live('input')”事件将使该函数替换用户输入的任何非数字字符，而用户看不到该字符。

如果使用“onkeyup”事件，用户会在几毫秒内看到该字符，这很不酷。

Answer 6

这对我有用：

$(document).ready(function () {
  $(".onlyNumbersInput").on('keyup keydown blur', function (event) {
    $(this).val($(this).val().replace(/[^0-9]/g, ''));
  });
});

它基于@luizfelippe 答案，已针对 jquery 1.7+ 更新

此代码允许粘贴并将实时删除任何非数字字符。

Answer 7

我想你忘了把 回来之前。

Answer 8

这就是我的做法：

jQuery( '#input').keyup(function() {

    var value = jQuery(this).val();

    var newValue = value.replace(/\D/g,''); //remove letters
    newValue =  parseInt(newValue);
    jQuery(this).val(newValue);

    value = jQuery(this).val();

    //just as safety, if some weird character is in the input
    if(  isNaN (value) || value  == "" ){
        jQuery(this).val(0);
    }
}

keyup事件对我来说似乎很好，我也尝试过keypress和keydown 。

Answer 9

我的 JQuery 解决方案。

const validKeyCodes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57]
    $('#your_input').on('keypress', function(e) {
      return validKeyCodes.indexOf(e.keyCode) > -1
    })

Answer 10

文字输入：

<input id="number" type="text" />

和脚本：

var number = $('#number');
number.on('input', function () {
    $(this).val(getOnlyNumbers($(this).val()));
});

// this function return only numbers as string or ''
function getOnlyNumbers(value) {
                let arr = value.toString().split('');
                let number = [];

                arr.forEach(function (elem) {
                    let charCode = elem.charCodeAt(0);

                    if (charCode > 31 && (charCode < 48 || charCode > 57)) {

                    } else {
                        number.push(elem);
                    }
                });

                return parseInt(number.join('')) || '';
            }

Answer 11

如果您在笔记本电脑中使用字母上方的数字并且没有连接普通键盘，则 KeyCodes 或 charCodes 不是执行此操作的最佳方法。 如果您知道字母上方的这些数字，以键 `(~) 开头，用于添加不同国家语言的特定符号。 所以只有数字会变成数字和字母。 例如：键 1(!) - 在立陶宛语中是ą 。 所以更好的方法是使用这个

var newValue = value.replace(/\D/g,'');

这取自上面的答案。

Answer 12

试试这个脚本：

var str = 5.5;
str = str.toString();
var errnum = [];
var onlyNumbers = [0,1,2,3,4,5,6,7,8,9,"0","1","2","3","4","5","6","7","8","9"];

for(i = 0; i < str.length; i++) { 
  if(jQuery.inArray(str[i],onlyNumbers) == -1){
       errnum.push(str[i]);
  }
}

if(errnum.length >= 1){
     console.log('not numeric character found!');
}