如何禁用移动端键盘顶部一次性验证码的快捷粘贴功能

原有onpaste监听只能拦截页面内触发的标准粘贴行为，移动端输入法/系统级的短信验证码快捷填充属于系统层级的文本注入，多数场景下不会触发标准paste事件，需要通过多事件组合拦截+值校验兜底的方案实现全覆盖。

核心拦截逻辑 #

• 第一层：拦截beforeinput事件，覆盖绝大多数现代移动端浏览器的系统填充场景，只要识别到输入来源为粘贴、自动填充类行为，直接阻止默认动作
• 第二层：监听input事件做兜底，适配部分定制安卓ROM、低版本iOS不触发beforeinput直接修改输入框值的场景，通过记录合法输入快照，检测到非手动输入的异常值变更时直接回滚
• 第三层：配置输入框属性关闭浏览器默认的自动填充识别，从源头减少系统触发快捷填充的概率

完整实现代码 #

window.onload = () => {
    const myInput = document.getElementById('myInput');
    // 记录上一次合法的输入值，用于异常回滚
    let lastValidValue = '';

    // 拦截标准paste事件，覆盖长按菜单粘贴场景
    myInput.addEventListener('paste', e => {
        e.preventDefault();
    });

    // 拦截beforeinput事件，覆盖大部分系统快捷填充场景
    myInput.addEventListener('beforeinput', e => {
        // 拦截所有非直接键盘键入的插入行为：粘贴、自动填充、拖拽插入等
        const blockInputTypes = [
            'insertFromPaste',
            'insertFromDrop',
            'insertFromPasteAsQuotation',
            'insertAutofill'
        ];
        if (blockInputTypes.includes(e.inputType)) {
            e.preventDefault();
        }
    });

    // input事件兜底，处理直接改值不触发前置事件的特殊场景
    myInput.addEventListener('input', e => {
        const currentValue = e.target.value;
        // 规则：手动输入单次只会新增/删除1个字符，如果值长度跳变超过1，判定为填充行为直接回滚
        // 该规则适配验证码输入框逐字输入的场景，可根据业务需求调整校验逻辑
        if (Math.abs(currentValue.length - lastValidValue.length) > 1) {
            e.target.value = lastValidValue;
            return;
        }
        // 校验通过则更新合法值快照
        lastValidValue = currentValue;
    });

    // 给输入框加属性，关闭浏览器自动填充识别
    myInput.setAttribute('autocomplete', 'off');
    myInput.setAttribute('autocorrect', 'off');
    myInput.setAttribute('autocapitalize', 'off');
    myInput.setAttribute('spellcheck', 'false');
}

补充说明 #

• 如果业务场景需要适配更复杂的输入规则，可以调整input事件的校验逻辑，比如增加输入时间间隔判断：100ms内插入超过2个字符就判定为填充行为拦截
• 部分深度定制的安卓系统存在系统权限级的文本注入逻辑，这种场景下前端无法100%拦截，属于系统权限高于前端页面的正常限制

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