jQuery - select function 不適用於移動設備

Question

賞金將在 6 天后到期。 此問題的答案有資格獲得+50聲望賞金。 aceraven777想引起對這個問題的更多關注。

我做了一個OTP設計。 所以我有 6 個輸入，每次用戶輸入一個數字時，它都會自動 go 到下一個輸入。 我已經制作了下面的代碼，但.select()不適用於手機。 有人可以幫我弄這個嗎？

代碼筆： https://codepen.io/aceraven777/pen/wvmbadQ

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

$('.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();
    });
});

如果 jQuery .select()或將其分割成多個輸入是不可能的，也許有人可以給我一個替代解決方案。

Answer 1

我在這里分叉了您的代碼並進行了一些更改。 以下是這些變化：

1. 將輸入類型文本更改為數字：
2. 添加 CSS 隱藏數字輸入的箭頭鍵。

JS 沒有變化。

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>

額外 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;
}

通過進行這些更改，我的移動設備開始顯示數字鍵盤而不是全鍵盤，這對於 OTP 輸入來說是更好的 UX，並且您的代碼已經注意只允許數字輸入，因此這是雙贏的。

我不喜歡箭頭鍵，所以我使用 CSS 將它們隱藏起來。 我不確定 CSS 是否適用於 iOS 設備，因為您可能知道 safari 不支持 Z2DDF56C37605420 中的很多東西

瞧。 它開始在我的手機上工作。