[英]iPhone returning same keydown event for (hash and 3) and (Asterisk and 8)
Am working on phone validation and have a requirement of auto formatting the input with phone no and only allow numeric characters to be added . 我正在进行电话验证,并要求使用电话号码自动格式化输入,并且只允许添加数字字符。 However when i try to restrict the input using keydown and keypress, IPhone is allowing me to enter # and * . 但是当我尝试使用keydown和keypress限制输入时,IPhone允许我输入#和*。 When i checked the keydown value , they both are same with 3 and 8 respectively (keycode 51 and 56). 当我检查keydown值时,它们分别与3和8相同(键码51和56)。 This works perfectly in Android browsers but fails in iPhone. 这在Android浏览器中完美运行但在iPhone中失败。
Anyone faced similar issue. 任何人都面临类似的问
$(formSelector + ' input[name^="phone"]').on('keydown keypress',function (e) {
// Allow: backspace, delete, tab, escape, and enter
if ( e.keyCode == 46 || e.keyCode == 8 || e.keyCode == 9 || e.keyCode == 27 || e.keyCode == 13 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)
) {
// let it happen, don't do anything
return;
} else {
// Ensure that it is a number and stop the keypress
if (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57) && (e.keyCode < 96 || e.keyCode > 105 ) ) {
e.preventDefault();
}
});
I also tried one other method which was suggested in stackoverflow to bind input with 'input propertychange' events and then use pattern matching. 我还尝试了另一种方法,它在stackoverflow中建议使用'input propertychange'事件绑定输入,然后使用模式匹配。 but this works correct in IPhone , but fails in Android. 但这在IPhone中工作正常,但在Android中失败。
$(formSelector + ' input[name^="phone"]').bind('input propertychange', function() {
var text = $(this).val();
if (isNaN(text)) {
$(this).val(text.replace(/[^\d]/gi, ''));
}
});
Does anyone have a common solution for this problem ?? 有没有人有这个问题的共同解决方案?
Thank you in advance 先感谢您
on('keydown keypress',function (e){});
First, triggers twice on iOS (no clue why), and bind
fails on FireFox, so just use $().keypress
. 首先,在iOS上触发两次(不知道为什么),并且在FireFox上bind
失败,所以只需使用$().keypress
。
Your filtering was letting through the right keycodes for the numbers you wanted, but, not catching the characters you needed to catch, at first I had a solution going which used e.orginialEvent.keyIdentifier to go after the misbehaving keys, but this failed dramatically on firefox. 你的过滤是通过正确的密码来获取你想要的数字,但是,没有捕获你需要捕获的字符,起初我有一个解决方案,使用e.orginialEvent.keyIdentifier来追踪行为不端的密钥,但这显然失败了在Firefox上。
In looking for a solution to that problem I found and modified code from this page about keycodes and charcodes in Firefox . 在寻找该问题的解决方案时,我发现并修改了此页面中有关Firefox中密钥代码和字符代码的代码。
$(formSelector).keypress(function (e) {
var k = e.keyCode || e.charCode;
var c = e.charCode;
var isArrow = (c == 0 && k >= 37 && k <= 40);
var isSpecial = ((k == 8) || (k == 9) || (k == 127)) || isArrow; // backspace, tab, delete
var isOK = (k >= 48 && k <= 57) ; // numbers
return isOK || isSpecial;
});
Live Versions: 实时版本:
Good Version, Tested on: iOS, Chrome, Firefox, Tested 好的版本,经过测试:iOS,Chrome,Firefox,经过测试
keyIdentifier version, Failed on: Firefox keyIdentifier版本,失败:Firefox
Try 尝试
<input type="number">
or 要么
<input pattern="[0-9]">
You could do: <input oninput="filter(this,'1|2|3|4|5|6|7|8|9|0')">
你可以这样做: <input oninput="filter(this,'1|2|3|4|5|6|7|8|9|0')">
And have this function in you list: 并在你的列表中有这个功能:
function filter(`obj,allowed) { var allowed = split("|");
var c = 0 for(c; c < allowed.length; c++) {
oqj.value=obj.value.replace(allowed[c],"")
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.