修复手机号输入框输入字母短暂显示问题及屏蔽非数字输入

问题说明 #

当前的手机号格式化实现中，输入字母等非数字内容时会短暂显示后才被清除，需要优化为：直接忽略非数字输入，不显示任何非数字内容，仅接受数字输入，同时保留手机号自动格式化功能。

修改后的完整代码 #

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="home.css">
    <title>Document</title>
</head>
<body>
    <input 
        id="phone-number"
        oninput="phoneNumberFormatter()"
        onkeydown="return blockNonNumericKeys(event)"
    />
    <script src="home.js" type="text/javascript"></script>
</body>
</html>

JavaScript 代码 #

function formatPhoneNumber(value) {
    if (!value) return value;
    const phoneNumber = value.replace(/[^\d]/g, '');
    const phoneNumberLength = phoneNumber.length;
    if (phoneNumberLength < 4) return phoneNumber;
    if (phoneNumberLength < 7) {
        return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`;
    }
    return `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3, 6)}-${phoneNumber.slice(6, 9)}`;
}

function phoneNumberFormatter() {
    const inputField = document.getElementById('phone-number');
    const formattedInputValue = formatPhoneNumber(inputField.value);
    // 保存光标位置，避免格式化后光标跳转到末尾
    const cursorPosition = inputField.selectionStart;
    inputField.value = formattedInputValue;
    // 调整光标位置，适配格式化后的字符
    const diff = formattedInputValue.length - inputField.value.length;
    inputField.selectionStart = inputField.selectionEnd = cursorPosition + diff;
}

function blockNonNumericKeys(event) {
    const allowedKeys = [
        'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight',
        'Tab', 'Enter', 'Home', 'End'
    ];
    // 判断是否是数字键（包括小键盘数字）
    const isNumeric = /^\d$/.test(event.key) || (event.keyCode >= 96 && event.keyCode <= 105);
    // 允许控制键或数字键，否则阻止默认行为
    if (allowedKeys.includes(event.key) || isNumeric) {
        return true;
    }
    event.preventDefault();
    return false;
}

关键修改点 #

• 拦截非数字输入：新增blockNonNumericKeys函数，在keydown事件中直接阻止非数字、非控制键的输入行为，从根源避免非数字内容显示。
• 事件替换：将原有的onkeydown触发格式化改为oninput事件，确保内容变化时才执行格式化，同时保留keydown用于拦截非法输入。
• 光标位置优化：在格式化时保存并恢复光标位置，避免每次格式化后光标自动跳转到输入框末尾，提升输入体验。

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