简体   繁体   English

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

[英]Allow only numbers in Input field IOS

Ok Well.好吧好吧。 I want to restrict input field to accept only numbers with maxlength 5 characters.我想限制输入字段只接受最大长度为 5 个字符的数字。

My Try:我的尝试:

HTML HTML

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

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

All works in firefox.一切都在 Firefox 中工作。 But when i check with safari ipad, it accepts special characters like ()@!#$&.但是当我用 safari ipad 检查时,它接受像 ()@!#$& 这样的特殊字符。 I used alert function for debugging.我使用警报功能进行调试。 It returns same keyCode for @ and 2 , 3 and # and so on.它为 @ 和 2 、 3 和 # 等返回相同的 keyCode。 I tried keyUp,keyPress events and event.charCode,event.which,event.key.我尝试了 keyUp、keyPress 事件和 event.charCode、event.which、event.key。 Nothing works没有任何效果

So how to differentiate it and i need support for backspace , enter , delete, arrow keys also.那么如何区分它,我还需要支持退格键、回车键、删除键、箭头键。

I've made this once and haven't been able to break it.我做过一次,一直无法打破它。 Tested on iPad.在 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));
});

This also accounts for copy/paste and drag and drop text, which people often forget.这也说明了人们经常忘记的复制/粘贴和拖放文本。 You can add the max-length to the onchange.您可以将最大长度添加到 onchange。

Be careful the iOS keyCodes are not the same desktop computers.注意 iOS keyCodes 不是同一个桌面计算机。 See IOS keyCodes in Javascript在 Javascript 中查看IOS keyCodes

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

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

Using type="number" on an input prevents you from reading non-numerical input values via input.value (it will then return an empty string) and thus eliminates the possibility of filtering invalid user input (+-.e) while keeping the valid numbers.在输入上使用type="number"可以防止您通过input.value读取非数字输入值(然后它将返回一个空字符串),从而消除过滤无效用户输入 (+-.e) 的可能性,同时保持有效数字。 Thus you have to use type="text" .因此你必须使用type="text" Example:例子:

 $('.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">

If you want the text-cursor not to move when pasting or typing invalid input, have a look at my answer to a similar question here: HTML input that takes only numbers and the + symbol如果您希望文本光标在粘贴或输入无效输入时不移动,请在此处查看我对类似问题的回答: 仅采用数字和 + 符号的 HTML 输入

If you want to enter the only numbers in input type number fields.如果您想在输入类型数字字段中输入唯一的数字。 this will be helpful, It will work on iPhone and iPad as well.这会很有帮助,它也适用于 iPhone 和 iPad。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM