[英]jQuery - select function is not working on mobile
I made an OTP design.我做了一个OTP设计。 So I have 6 inputs and everytime the user types a number it will go automatically to the next input.所以我有 6 个输入,每次用户输入一个数字时,它都会自动 go 到下一个输入。 I have made the code below but the .select()
is not working on mobile phones.我已经制作了下面的代码,但.select()
不适用于手机。 Can someone help me with this?有人可以帮我弄这个吗?
Codepen: https://codepen.io/aceraven777/pen/wvmbadQ代码笔: https://codepen.io/aceraven777/pen/wvmbadQ
HTML HTML
<div class="otp-group">
<div class="otp-digit otp-digit-1">
<input type="text" class="input-text" autocomplete="on" aria-label="-" placeholder="-" aria-required="false" maxlength="1" pattern="\d*">
</div>
<div class="otp-digit otp-digit-2">
<input type="text" class="input-text" autocomplete="on" aria-label="-" placeholder="-" aria-required="false" maxlength="1" pattern="\d*">
</div>
<div class="otp-digit otp-digit-3">
<input type="text" class="input-text" autocomplete="on" aria-label="-" placeholder="-" aria-required="false" maxlength="1" pattern="\d*">
</div>
<div class="otp-digit otp-digit-4">
<input type="text" class="input-text" autocomplete="on" aria-label="-" placeholder="-" aria-required="false" maxlength="1" pattern="\d*">
</div>
<div class="otp-digit otp-digit-5">
<input type="text" class="input-text" autocomplete="on" aria-label="-" placeholder="-" aria-required="false" maxlength="1" pattern="\d*">
</div>
<div class="otp-digit otp-digit-6">
<input type="text" class="input-text" autocomplete="on" aria-label="-" placeholder="-" aria-required="false" maxlength="1" pattern="\d*">
</div>
</div>
JS JS
$('.otp-digit').each(function() {
var $otp_digit = $(this);
var $input = $otp_digit.find('input');
$input.attr('maxlength', 1);
$input.attr('pattern', '\\d*');
$input.on('keyup', function(e) {
var $input = $(this);
var $otp_digit = $input.closest('.otp-digit');
var $prev_otp_digit = $otp_digit.prev();
var $next_otp_digit = $otp_digit.next();
// Backspace or left arrow key
if (e.keyCode === 8 || e.keyCode === 37) {
if ($prev_otp_digit.length && $prev_otp_digit.hasClass('otp-digit')) {
$prev_otp_digit.find('input').select().focus();
}
}
// Right arrow and numbers
else if (e.keyCode === 39 || (e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
if ($next_otp_digit.length && $next_otp_digit.hasClass('otp-digit')) {
$next_otp_digit.find('input').select().focus();
}
}
// Backspace
if (e.keyCode === 8) {
$input.val('');
}
else if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 96 && e.keyCode <= 105)) {
var characterCode = ((96 <= e.keyCode && e.keyCode <= 105)? e.keyCode - 48 : e.keyCode);
$input.val(String.fromCharCode(characterCode));
} else {
return false;
}
});
$input.on('keypress', function(e) {
var keyCode = e.keyCode || e.which;
// Allow only typing numbers
if (keyCode >= 48 && keyCode <= 57) {
return true;
}
return false;
});
$input.on("change",function(e) {
var $this = $(this);
var input_value = $this.val().replace(/[^0-9]/gi, '');
$this.val(input_value);
var $form = $this.closest('.gigya-otp-login-form');
var $inputs = $form.find('.otp-digit input');
var otp_code = '';
$inputs.each(function() {
otp_code += $(this).val();
});
});
$input.on("cut copy paste",function(e) {
e.preventDefault();
});
});
If the jQuery .select()
or segmenting it into multiple input isn't possible, maybe someone can give me an alternate solution.如果 jQuery .select()
或将其分割成多个输入是不可能的,也许有人可以给我一个替代解决方案。
I forked your code here and made some changes.我在这里分叉了您的代码并进行了一些更改。 Here are those changes:以下是这些变化:
There are no changes in JS. JS 没有变化。
HTML HTML
<div class="otp-group">
<div class="otp-digit otp-digit-1">
<input type="number" class="input-text" autocomplete="on" aria-label="-" placeholder="-" aria-required="false" maxlength="1" pattern="\d*">
</div>
<div class="otp-digit otp-digit-2">
<input type="number" class="input-text" autocomplete="on" aria-label="-" placeholder="-" aria-required="false" maxlength="1" pattern="\d*">
</div>
<div class="otp-digit otp-digit-3">
<input type="number" class="input-text" autocomplete="on" aria-label="-" placeholder="-" aria-required="false" maxlength="1" pattern="\d*">
</div>
<div class="otp-digit otp-digit-4">
<input type="number" class="input-text" autocomplete="on" aria-label="-" placeholder="-" aria-required="false" maxlength="1" pattern="\d*">
</div>
<div class="otp-digit otp-digit-5">
<input type="number" class="input-text" autocomplete="on" aria-label="-" placeholder="-" aria-required="false" maxlength="1" pattern="\d*">
</div>
<div class="otp-digit otp-digit-6">
<input type="number" class="input-text" autocomplete="on" aria-label="-" placeholder="-" aria-required="false" maxlength="1" pattern="\d*">
</div>
</div>
Extra CSS额外 CSS
/* Add CSS to hide number arrows */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
By making these changes my mobile device started showing the number pad instead of a full keyboard which is a better UX for OTP inputs and your code already takes care to allow only numeric inputs so it's a win-win.通过进行这些更改,我的移动设备开始显示数字键盘而不是全键盘,这对于 OTP 输入来说是更好的 UX,并且您的代码已经注意只允许数字输入,因此这是双赢的。
I didn't like the arrow keys so I kept them hidden using CSS.我不喜欢箭头键,所以我使用 CSS 将它们隐藏起来。 I'm not sure if that CSS works on iOS devices cause you might know safari doesn't support a lot of things in CSS.我不确定 CSS 是否适用于 iOS 设备,因为您可能知道 safari 不支持 Z2DDF56C37605420 中的很多东西
And Voila.瞧。 it started working on my phone.它开始在我的手机上工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.