移动端jQuery .select()函数失效求助（OTP输入场景）

问题背景 #

我开发了一个包含6个独立输入框的OTP验证码组件，用户输入数字时会自动跳转到下一个输入框，但在移动设备上，jQuery的.select()函数无法正常选中输入框内的内容，需要解决这个兼容性问题，或者提供更可靠的替代实现方案。

修复现有多输入框方案的.select()问题 #

移动端浏览器对文本选择的时机和API支持存在差异，直接调用.select()经常会因为焦点未完全激活而失效。可以通过以下两种方式修复：

方案1：调整调用顺序并延迟执行 #

将focus()放在select()之前，并用短延迟确保焦点稳定后再触发选择操作：

// 修改原代码中的跳转逻辑
// 处理回退（退格/左箭头）
if (e.keyCode === 8 || e.keyCode === 37) {
    if ($prev_otp_digit.length && $prev_otp_digit.hasClass('otp-digit')) {
        const $prevInput = $prev_otp_digit.find('input');
        $prevInput.focus();
        // 延迟10ms确保焦点激活后再选中内容
        setTimeout(() => $prevInput.select(), 10);
    }
}
// 处理前进（右箭头/数字键）
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')) {
        const $nextInput = $next_otp_digit.find('input');
        $nextInput.focus();
        setTimeout(() => $nextInput.select(), 10);
    }
}

方案2：使用原生API强制设置选区 #

部分移动端浏览器对jQuery封装的.select()支持不佳，直接使用原生JS的选区API可以绕过兼容性问题：

// 封装一个可靠的文本选中函数
function selectInputContent($input) {
    const inputEl = $input[0];
    inputEl.focus();
    // 优先使用setSelectionRange，兼容性更好
    if (inputEl.setSelectionRange) {
        inputEl.setSelectionRange(0, inputEl.value.length);
    } else {
        // 降级处理旧浏览器
        inputEl.select();
    }
}

// 修改原代码中的跳转逻辑
// 回退时调用
selectInputContent($prev_otp_digit.find('input'));
// 前进时调用
selectInputContent($next_otp_digit.find('input'));

替代方案：单个输入框模拟多OTP位 #

多输入框方案需要处理复杂的焦点管理和兼容性问题，改用单个输入框+CSS掩码的方式，视觉上模拟多个输入位，逻辑更简洁且兼容性更好：

HTML结构 #

<div class="otp-container">
    <input type="text" class="otp-input" maxlength="6" pattern="\d{6}" autocomplete="one-time-code" aria-label="请输入6位验证码">
    <div class="otp-mask">
        <span class="otp-digit"></span>
        <span class="otp-digit"></span>
        <span class="otp-digit"></span>
        <span class="otp-digit"></span>
        <span class="otp-digit"></span>
        <span class="otp-digit"></span>
    </div>
</div>

CSS样式 #

.otp-container {
    position: relative;
    display: flex;
    gap: 10px;
    width: fit-content;
}

.otp-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    font-size: 16px; /* 避免移动端浏览器自动缩放页面 */
}

.otp-mask {
    display: flex;
    gap: 10px;
}

.otp-digit {
    width: 45px;
    height: 45px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    color: #666;
    transition: border-color 0.2s;
}

.otp-digit.filled {
    border-color: #2196f3;
    color: #333;
}

JavaScript逻辑 #

const $otpInput = $('.otp-input');
const $maskDigits = $('.otp-digit');

$otpInput.on('input', function() {
    // 只保留数字内容
    const inputVal = $(this).val().replace(/[^0-9]/g, '');
    $(this).val(inputVal);

    // 更新掩码的显示状态
    $maskDigits.each((index, el) => {
        const digit = inputVal[index] || '';
        $(el).text(digit).toggleClass('filled', !!digit);
    });

    // 输入完成后自动触发验证（可选）
    if (inputVal.length === 6) {
        console.log('验证码输入完成：', inputVal);
        // 这里可以添加提交表单或验证逻辑
    }
});

// 优化移动端体验：聚焦时自动弹出数字键盘
$otpInput.on('focus', function() {
    $(this).attr('type', 'tel');
});

这个方案的优势：

• 完全避免多输入框的焦点跳转、文本选择等兼容性问题
• 代码逻辑更简洁，维护成本低
• 支持一键粘贴验证码（多输入框方案需要额外处理粘贴逻辑）
• 移动端适配更友好，自动弹出数字键盘

内容的提问来源于stack exchange，提问作者aceraven777