粘贴内容后onmouseout事件未触发导致PIN输入框掩码失效求助

前提条件 #

确保页面已存在如下两个表单元素：

• 用户交互用的PIN输入框：<input type="text" id="user_pin_code">
• 存储实际PIN值的隐藏表单域：<input type="hidden" id="PINcode" name="PINcode">

修复后的完整JS代码 #

$(document).ready(function() {
    let actualTextEntered = "";
    const $pinInput = $("#user_pin_code");
    const $hiddenPin = $("#PINcode");

    // 统一监听所有输入场景：键盘输入、粘贴、剪切、拖拽输入等
    $pinInput.on('input', function(e) {
        const inputVal = $pinInput.val();
        // 过滤掉所有*号，获取本次新增的输入内容
        const newChars = inputVal.replace(/\*/g, "");
        // 追加到实际值末尾
        actualTextEntered += newChars;
        // 同步到隐藏表单域
        $hiddenPin.val(actualTextEntered);
        // 替换输入框显示为对应数量的*
        $pinInput.val("*".repeat(actualTextEntered.length));
    });

    // 监听退格和回车操作，避免重复注册监听器
    $pinInput.on('keydown', function(event) {
        const key = event.key;
        // 退格逻辑：支持逐位删除
        if (key === "Backspace") {
            // 阻止默认退格行为，避免直接删*号导致取值混乱
            event.preventDefault();
            // 只在有内容的时候删除最后一位
            if (actualTextEntered.length > 0) {
                actualTextEntered = actualTextEntered.slice(0, -1);
                $hiddenPin.val(actualTextEntered);
                $pinInput.val("*".repeat(actualTextEntered.length));
            }
        }
        // 回车逻辑：触发表单提交
        if (key === "Return" || key === "Enter") {
            event.preventDefault();
            // 此处可替换为你自己的提交逻辑
            $pinInput.closest('form').submit();
        }
    });

    // 专门处理粘贴事件，兼容所有粘贴场景（右键粘贴/快捷键粘贴）
    $pinInput.on('paste', function(event) {
        event.preventDefault();
        // 读取剪贴板文本
        const clipboardData = event.originalEvent.clipboardData || window.clipboardData;
        const pastedText = clipboardData.getData('text');
        // 过滤非数字内容（PIN一般为数字，可根据需求调整过滤规则）
        const filteredPaste = pastedText.replace(/[^0-9]/g, '');
        // 追加到实际值
        actualTextEntered += filteredPaste;
        // 同步更新
        $hiddenPin.val(actualTextEntered);
        $pinInput.val("*".repeat(actualTextEntered.length));
    });
});

优化点说明 #

• 用input事件替换原有的keyup事件，覆盖所有输入场景，解决粘贴操作不触发逻辑的问题
• 将keydown监听器移到输入事件回调外，避免重复注册导致的内存泄漏问题
• 优化退格逻辑，支持逐位删除字符，不再直接清空所有已输入内容
• 新增专门的paste事件处理，直接读取剪贴板内容，避免特殊场景下取值异常
• 保留了原有的回车提交逻辑，原有业务流程无需调整

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