Question

好吧。我想限制输入字段只接受maxlength 5个字符的数字。

我的尝试：

HTML

 <input type="number" maxlength="5" onKeyDown="numbersOnly(event);/>
 <input type="text" pattern= "[0-9]" onKeyDown="numbersOnly(event);/>

的Javascript

   function numbersOnly(event,length) 
   {  
    return event.ctrlKey || event.altKey 
    || (95<event.keyCode && event.keyCode<106)
    || (event.keyCode==8) || (event.keyCode==9) 
    || (event.keyCode>34 && event.keyCode<40) 
    || (event.keyCode==46)
    || (event.keyCode>47)&&(event.keyCode<=57) ;
   }

所有在Firefox中都有效。但是当我用safari ipad检查时，它会接受特殊字符，如（）@！＃$＆amp;。我使用alert函数进行调试。它为@和2,3和＃返回相同的keyCode，依此类推。我尝试了keyUp，keyPress事件和event.charCode，event.which，event.key。什么都不行

所以如何区分它我需要支持退格键，输入，删除，箭头键。

Answer 1

我曾经做过一次并且无法打破它。在iPad上测试过。

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

这也解释了人们经常忘记的复制/粘贴和拖放文本。您可以将最大长度添加到onchange。

Answer 2

小心iOS keyCodes不是同一台桌面计算机。见IOS keyCodes in Javascript

<input type="number" maxlength="5" onkeypress="numbersOnly(event);/>

 var numbersOnly = function(event) {
        if(event.keyCode >= 48 && event.keyCode <= 57) {
            return false;
        } else {
            event.preventDefault();
        }
    }

Answer 3

在输入上使用type="number"可以防止您通过input.value读取非数字输入值（它将返回一个空字符串），从而消除了过滤无效用户输入的可能性（+ - 。 e）同时保留有效数字。因此，您必须使用type="text"。例如：

$('.input-number').on('input', function (event) {
    this.value = this.value.replace(/[^0-9]/g, '');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="input-number" type="text" maxlength="5">

如果您希望在粘贴或输入无效输入时不移动文本光标，请在此处查看我对类似问题的回答：HTML input that takes only numbers and the + symbol

Answer 4

如果您想在输入类型数字字段中输入唯一的数字。这会很有帮助，它也适用于 iPhone 和 iPad。

 $(document).on('keypress', 'input[type="number"]', function (event) {
    event.target.value = event.target.value.replace(/[^0-9]/g, '');
    return event.code.includes('Digit');
});

仅允许输入字段IOS中的数字

4 个答案: