如何为Sweet Alert实现自定义键盘并写入PIN输入框

核心问题分析 #

你的配置里同时使用了input: 'password'、html和content属性，SweetAlert2会优先处理内置input，导致自定义html和输入框的关联失效；另外直接操作innerHTML对密码输入框无效，应该操作其value属性。

解决方案步骤 #

1. 移除冲突配置：删除Swal中的input和content，完全用自定义HTML构建弹窗内容，包含密码输入框和数字键盘。
2. 绑定键盘事件：修改Key_Pressed函数，通过ID获取输入框并操作其value实现输入、回退、清空。
3. 手动处理验证逻辑：在弹窗确认按钮点击时，手动获取输入值并验证，通过Swal的API控制弹窗关闭和提示。

修改后的代码 #

Keypad.js 调整

CSS = `* {
    margin: 0;
    padding: 0;
}
#swal2-content body {
    font: 71%/1.5 Verdana, Sans-Serif;
}
#container {
    margin: 20px auto;
    width: 300px;
}
#keyboard {
    margin: 0;
    padding: 0;
    list-style: none;
}
#keyboard li {
    float: left;
    margin: 0 5px 5px 0;
    width: 60px;
    height: 60px;
    font-size: 24px;
    line-height: 60px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    user-select: none;
}
#keyboard li:hover {
    background: #f5f5f5;
    cursor: pointer;
}
.clearl {
    clear: left;
}
#pin-input {
    width: 100%;
    padding: 10px;
    font-size: 20px;
    margin-bottom: 15px;
    text-align: center;
    letter-spacing: 4px;
}`;

function Key_Pressed(key) {
    const input = document.getElementById('pin-input');
    if (typeof key === 'number') {
        input.value += key;
    } else if (key === 'bck') {
        input.value = input.value.slice(0, -1);
    } else if (key === 'clr') {
        input.value = '';
    }
}

HTML = `<div id="container">
    <input type="password" id="pin-input" placeholder="Enter PIN">
    <ul id="keyboard">
        <li class="letter" onmousedown="Key_Pressed(1)">1</li>
        <li class="letter" onmousedown="Key_Pressed(2)">2</li>
        <li class="letter" onmousedown="Key_Pressed(3)">3</li>
        <li class="letter clearl" onmousedown="Key_Pressed(4)">4</li>
        <li class="letter" onmousedown="Key_Pressed(5)">5</li>
        <li class="letter" onmousedown="Key_Pressed(6)">6</li>
        <li class="letter clearl" onmousedown="Key_Pressed(7)">7</li>
        <li class="letter" onmousedown="Key_Pressed(8)">8</li>
        <li class="letter" onmousedown="Key_Pressed(9)">9</li>
        <li class="letter clearl" onmousedown="Key_Pressed(0)">0</li>
        <li class="letter" onmousedown="Key_Pressed('bck')">bck</li>
        <li class="letter" onmousedown="Key_Pressed('clr')">clr</li>
    </ul>
</div>`;

Panel.Lock 函数修改

var Lock_HTML = `<style>${CSS}</style>${HTML}`;

Panel.Lock = function () {
    if (PasswordChecked === false) {
        Swal.fire({
            title: "Password Required",
            html: Lock_HTML,
            showCancelButton: false,
            allowOutsideClick: false,
            allowEscapeKey: false,
            confirmButtonText: "Submit"
        }).then((result) => {
            if (result.isConfirmed) {
                const inputValue = document.getElementById('pin-input').value;
                if (inputValue === Password.toString()) {
                    PasswordChecked = true;
                    Panel.Button_Pressed('B-01');
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Incorrect PIN',
                        text: 'Sorry the password is incorrect',
                        confirmButtonText: 'Try Again'
                    }).then(() => {
                        Panel.Lock(); // 重新弹出锁界面
                    });
                }
            }
        });
    } else {
        Panel.Check_Lock(OnButtonState);
    }
}

关键修改说明 #

• 把密码输入框整合到自定义HTML中，给它分配IDpin-input，方便JS获取和修改值。
• 调整CSS适配SweetAlert的容器（用#swal2-content前缀避免全局样式污染），缩小键盘容器宽度适配弹窗。
• Key_Pressed函数根据传入的参数类型，分别处理数字输入、回退和清空操作，直接修改输入框的value属性。
• 移除原有的inputValidator，改为在确认按钮点击后手动获取值并验证，验证失败时弹出错误提示并重新调用锁界面。

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