只允许在输入字段 IOS 中输入数字答案

【问题标题】：Allow only numbers in Input field IOS只允许在输入字段 IOS 中输入数字
【发布时间】：2014-09-14 12:29:08
【问题描述】：

好吧好吧。我想限制输入字段只接受最大长度为 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 检查时，它接受特殊字符，如 ()@!#$&。我使用警报功能进行调试。它为 @ 和 2 、 3 和 # 等返回相同的 keyCode。我尝试了 keyUp、keyPress 事件和 event.charCode、event.which、event.key。没有任何效果

那么如何区分它，我还需要支持退格键、回车键、删除键和箭头键。

【问题讨论】：

numbersOnly 是javascript函数而不是jquery，你能告诉我们你在哪里调用这个函数吗？
查看这个类似问题的答案：stackoverflow.com/questions/37390665/… - 你可以写 e。 G。 <input type="text" data-filter="[0-9]{0,5}">

标签： javascript jquery html

【解决方案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。

【讨论】：

支持删除、退格等其他键。会接受吗？？ @乔纳森
是的，退格等不会触发keypress 事件。如果您需要某些特殊字符，您可以随时在此处添加键。
这并没有在 onchange 中删除？ this.value.replace(/[^0-9]+/g, '');你能解释一下你是怎么打破它的，因为我没能做到。
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.which >47)&&(event.which <=57) ; 这是我在函数中添加的内容
上面我贴的代码是你的修改。我只在数字中添加了which

【解决方案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();
        }
    }

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

 $(document).on('keypress', 'input[type="number"]', function (event) {
    return event.code.includes('Digit') || event.code.includes('Numpad') ||  event.code.includes('Period');;
});

【讨论】：