部分Android设备输入框特定值时input事件重复触发问题

这个问题的核心是Android特定输入法（比如POCO F4自带的MIUI输入法）在输入框内容被JS修改后，会额外触发一次input事件，且第二次事件读取到的是「原始输入值+JS修改后的值」的拼接结果。当输入1000-1009时，第一次input触发后，代码将纯数字1000格式化为1000.，此时输入法误判输入操作未完成，把之前的原始输入值1000再次追加到输入框，导致第二次事件触发时读取到10001000，最终处理后得到错误结果。

另外你的代码存在两个加剧问题的点：

• 每次触发input事件都直接修改input.value，没有判断当前是否正在处理，导致递归触发事件
• 修改value后未处理光标位置，不仅影响用户体验，也可能干扰输入法的状态判断

针对这个问题，我们可以通过以下几个步骤修复：

1. 添加处理状态标记，防止递归触发 #

在事件处理函数中设置一个标记，正在处理时忽略新的input事件，避免重复执行。

2. 防抖处理（可选但推荐） #

用防抖函数过滤短时间内的重复触发，进一步避免输入法的异常事件。

3. 仅在值真正变化时更新输入框 #

对比格式化前后的值，只有当结果不同时才修改input.value，减少不必要的DOM操作。

4. 保存并恢复光标位置 #

修改input.value后，将光标恢复到正确的位置，提升用户体验同时避免输入法异常。

<html lang="en">
<head>
</head>
<body>
    <!-- Main Content -->
    <main>
        <span>
            Amount
        </span>
        <div>
            <input type="text" name="amt" id="amt" value="" maxlength="11" class="form-control cc-fs-6" placeholder="Put 1000 to 1009">
        </div>
        <div id="inputDiv">
        </div>
        </main>
        <script type="text/javascript">
            const amt = document.getElementById('amt');
            let isProcessing = false; // 处理状态标记
            const debounceDelay = 100; // 防抖延迟时间
            let timeoutId;

            amt.addEventListener("input", debounceUpdateValue);
            
            // 防抖函数
            function debounceUpdateValue() {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(updateValue, debounceDelay);
            }

            function updateValue() {
                if (isProcessing) return; // 正在处理时直接返回
                isProcessing = true;

                const inputDiv = document.getElementById('inputDiv');
                const originalValue = amt.value;
                inputDiv.innerHTML += "Amt1: " + originalValue + "<br>";

                // 提取纯数字
                const amount = originalValue.replace(/[^0-9]/g, '');
                // 格式化千分位
                let format = "";
                const n = amount.length;
                for (let i = 0; i < n; i++) {
                    format += amount.charAt(i);
                    if ((n - i - 1) % 3 === 0 && i !== n - 1) {
                        format += ".";
                    }
                }

                inputDiv.innerHTML += "Amt2: " + amt.value + "<br>";
                
                // 仅当格式化后的值与当前输入值不同时才更新
                if (format !== amt.value) {
                    // 保存光标位置
                    const cursorPos = amt.selectionStart;
                    const originalLength = amt.value.length;
                    const formattedLength = format.length;
                    
                    amt.value = format;
                    
                    // 计算新的光标位置：如果光标在修改前的位置，调整到对应位置
                    let newCursorPos = cursorPos + (formattedLength - originalLength);
                    // 确保光标位置合法
                    newCursorPos = Math.max(0, Math.min(newCursorPos, formattedLength));
                    amt.setSelectionRange(newCursorPos, newCursorPos);
                }

                inputDiv.innerHTML += "Amt3: " + amt.value + "<br>";
                isProcessing = false; // 处理完成，重置标记
            };
        </script><!-- Bottom Nav Bar -->
</body>
</html>

• 状态标记isProcessing是核心，它能直接阻止处理过程中再次触发的事件执行，避免递归修改值
• 防抖函数可以过滤掉输入法快速触发的重复事件，进一步提升稳定性
• 光标位置处理能让用户输入更流畅，同时减少输入法误判的概率

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