安卓Chrome中React输入框连字符无法退格问题排查

你的代码在安卓Chrome和桌面端出现退格问题，核心原因有三个：

1. 跨端键盘事件的event.key不一致
   安卓软键盘的退格键不一定返回标准的'Backspace'字符串，部分设备会返回'Delete'或其他非标准值，导致lastKeyBackspaceOrDelete无法被正确标记，退格逻辑不触发。而桌面端则是因为原生退格已经删除一个字符，代码里又执行slice(0,-1)，叠加导致删除两个字符。

2. 全局变量的状态不同步
   lastKeyBackspaceOrDelete作为全局变量，在快速连续操作（比如快速按退格）时，状态更新不及时，会出现逻辑判断错误。

3. 格式化逻辑的缺陷
   手动添加的连字符在部分浏览器中会被视为“非用户输入内容”，原生退格默认不会删除这类字符；同时原逻辑在添加连字符后，没有处理光标位置，进一步加剧了操作混乱。

修复后的实现方案 #

我重构了代码，用更可靠的纯函数格式化逻辑替代原有的事件依赖，同时解决跨端兼容问题：

import { useState } from 'react';

const FormattedInput = () => {
  const [inputValue, setInputValue] = useState('');

  // 统一处理输入格式化：过滤非法字符、转大写、插入连字符
  const formatValue = (rawValue) => {
    // 只保留字母数字，转大写
    const cleaned = rawValue.replace(/[^0-9a-zA-Z]/g, '').toUpperCase();
    
    let formatted = '';
    for (let i = 0; i < cleaned.length; i++) {
      // 在第6位和第12位字符后插入连字符（对应最终长度7和13的位置）
      if (i === 6 || i === 12) {
        formatted += '-';
      }
      formatted += cleaned[i];
      // 限制总长度不超过17（包含两个连字符）
      if (formatted.length >= 17) break;
    }
    return formatted;
  };

  const handleChange = (e) => {
    const newValue = formatValue(e.target.value);
    setInputValue(newValue);

    // 修复光标位置：添加连字符后自动跳到连字符后面
    const cursorPos = e.target.selectionStart;
    // 当格式化后长度比原始输入长，且刚好是插入连字符的位置时，调整光标
    if (newValue.length > e.target.value.length && (newValue.length === 7 || newValue.length === 13)) {
      setTimeout(() => {
        e.target.setSelectionRange(cursorPos + 1, cursorPos + 1);
      }, 0);
    }
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
      maxLength="17"
    />
  );
};

export default FormattedInput;

代码优势 #

• 跨端兼容：不依赖键盘事件的key值，直接处理输入框的原始值，适配桌面、安卓、iOS等各种设备的键盘；
• 无状态混乱：用React的useState管理输入值，替代全局变量，避免跨事件的状态不同步；
• 可靠的格式化：先过滤非法字符再统一插入连字符，退格时会自动移除连字符（因为过滤后重新生成格式，删除字符后连字符会自动调整）；
• 优化用户体验：自动修复光标位置，避免添加连字符后光标跳到奇怪的地方。

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