Android Chrome下JavaScript处理特殊字符输入的问题

问题背景 #

开发带可编辑HTML表格的Web应用，要求仅允许输入1-9的单个数字，支持修改或退格删除。桌面端通过td绑定onkeydown事件实现逻辑正常，但安卓设备上，设置inputmode=numeric唤起的数字键盘包含,、.、-、空格等特殊字符，这些字符无法被keydown事件拦截——调试发现它们的keyCode都是229，且key属性为undefined，即使添加229的判断也无法阻止输入。

问题原因 #

安卓输入法的IME（输入法编辑器）在处理输入时，会先触发keydown事件并返回keyCode=229，这属于输入法的中间合成状态，此时无法获取实际输入的字符内容，所以通过keydown拦截无效。必须在输入完成后，通过input或compositionend事件来检查并修正输入内容。

解决方案 #

放弃仅依赖keydown事件的拦截逻辑，改用input事件监听输入完成后的内容，同时结合compositionend事件处理输入法合成完成的场景，确保最终内容符合要求：

完整代码示例 #

HTML

<head>   
    <meta charset="UTF-8">
</head>   
<body>   
<table id="table" class="centre">
    <tbody>
        <tr>
            <td contentEditable inputmode="numeric"></td>
        </tr>
    </tbody>
</table>
</body>

CSS

table { border-collapse: collapse; font-family: Calibri, sans-serif; }

td { border: solid thin; height: 2.3em; width: 2.3em; text-align: center; padding: 0; }

JavaScript

// 获取目标td元素
const editableTd = document.querySelector('td[contentEditable]');

// 处理输入内容的核心函数
function handleInput() {
    // 过滤内容：仅保留1-9的单个数字
    const validContent = this.innerText.replace(/[^1-9]/g, '');
    // 只保留第一个合法数字（确保单个字符）
    this.innerText = validContent.slice(0, 1);
}

// 绑定事件：input监听实时输入，compositionend处理输入法合成完成
editableTd.addEventListener('input', handleInput);
editableTd.addEventListener('compositionend', handleInput);

逻辑说明 #

1. 事件选择：input事件会在内容变化时触发（包括退格、粘贴等操作），compositionend则在输入法完成字符合成时触发（避免中文输入法等场景下的中间状态干扰）。
2. 内容过滤：用正则表达式/[^1-9]/g移除所有非1-9的字符，再通过slice(0,1)确保只保留单个字符，完全符合需求。
3. 退格处理：退格键会触发input事件，此时innerText变为空，函数会自动保留空值，实现清空效果。

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