有一个快速的方法来设置HTML文本输入(<input type=text />),只允许数字击键(加上'.')?


当前回答

在准备验证任何东西时调用此函数。我在这里使用了一个文本框

在我的HTML中:

<input type="button" value="Check IT!" onclick="check(document.getElementById('inputboxToValidate').value);" />

在JavaScript代码中:

function check(num){
    var onlynumbers = true
    for (var i = 0; i < (num.length - 1); i++) {
        if (num.substr(i, 1) != "0" || num.substr(i, 1) != "1" || num.substr(i, 1) != "2" || num.substr(i, 1) != "3" || num.substr(i, 1) != "4" || num.substr(i, 1) != "5" || num.substr(i, 1) != "6" || num.substr(i, 1) != "7" || num.substr(i, 1) != "8" || num.substr(i, 1) != "9") {
            alert("please make sure that only numbers have been entered in the Quantaty box");
            onlynumbers = false
        }
    }
    if (onlynumbers == true) {

        //Execute Code
    }
}

其他回答

您可以尝试使用" 'onkeydown " '事件并取消事件(事件。preventDefault或类似的)当它不是允许的键之一。

上面的一些答案使用了过时的内容,比如which的使用。

要检查按下的键是否为数字,可以使用keyup eventListener来读取event.key的值。如果不是数字,就不要输入字符。您可以将其他密钥加入白名单。例如,允许用户使用箭头在输入字段中向后或向前导航,或者按退格键并删除输入的数字。

validate (event) {
  const isNumber = isFinite(event.key)
  const whitelist = ['Backspace','Delete','ArrowDown','ArrowUp','ArrowRight','ArrowLeft']
  const whitelistKey = whitelist.includes(event.key)

  if (!isNumber && !whitelistKey) {
    event.preventDefault()
  }
}

在任何击键上执行此函数,它将不允许除加号、连字符和圆括号之外的任何内容。

假设:+234-(123)1231231将工作 但不是信件

替换(/ ^[0 - 9 +()——]*美元/ test (char))与(/ ^[0 - 9]*美元/ test (char))只允许数字按键。

isNumber(e) {
    let char = String.fromCharCode(e.keyCode);
    if (/^[0-9+()-]*$/.test(char)) return true;
    else e.preventDefault();
},

一个使用jQuery和replace()而不是查看事件的简短而甜蜜的实现。keyCode或event.which:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

只有一个小的副作用,输入的字母出现暂时和CTRL/CMD + A似乎表现有点奇怪。

下面的代码还将检查PASTE事件。 取消“ruleSetArr_4”的注释,并在“ruleSetArr”中添加(concate)以允许浮点数。 简单的复制/粘贴功能。用参数中的input元素调用它。 例如:inputIntTypeOnly($('输入[name = " inputName "] '))

function inputIntTypeOnly(elm){ elm.on("keydown",function(event){ var e = event || window.event, key = e.keyCode || e.which, ruleSetArr_1 = [8,9,46], // backspace,tab,delete ruleSetArr_2 = [48,49,50,51,52,53,54,55,56,57], // top keyboard num keys ruleSetArr_3 = [96,97,98,99,100,101,102,103,104,105], // side keyboard num keys ruleSetArr_4 = [17,67,86], // Ctrl & V //ruleSetArr_5 = [110,189,190], add this to ruleSetArr to allow float values ruleSetArr = ruleSetArr_1.concat(ruleSetArr_2,ruleSetArr_3,ruleSetArr_4); // merge arrays of keys if(ruleSetArr.indexOf() !== "undefined"){ // check if browser supports indexOf() : IE8 and earlier var retRes = ruleSetArr.indexOf(key); } else { var retRes = $.inArray(key,ruleSetArr); }; if(retRes == -1){ // if returned key not found in array, return false return false; } else if(key == 67 || key == 86){ // account for paste events event.stopPropagation(); }; }).on('paste',function(event){ var $thisObj = $(this), origVal = $thisObj.val(), // orig value newVal = event.originalEvent.clipboardData.getData('Text'); // paste clipboard value if(newVal.replace(/\D+/g, '') == ""){ // if paste value is not a number, insert orig value and ret false $thisObj.val(origVal); return false; } else { $thisObj.val(newVal.replace(/\D+/g, '')); return false; }; }); }; var inptElm = $('input[name="inputName"]'); inputIntTypeOnly(inptElm); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" name="inputName" value="1">