如何用JavaScript实现输入框按键时替换预定义列表中的自定义文本？

实现思路 #

监听输入框的按键按下事件，拦截目标按键的默认输入行为，将其替换为预设的特殊字符，同时处理光标位置保证输入体验。

完整代码示例 #

HTML部分 #

<input type="text" id="specialInput" placeholder="输入a/b/c/d试试">

JavaScript部分 #

// 定义需要替换的字符映射表
const charlist = {
  'a': '𝖆',
  'b': '𝖇',
  'c': '𝖈',
  'd': '𝖉'
};

// 获取目标输入框元素
const input = document.getElementById('specialInput');

// 绑定按键按下事件
input.addEventListener('keydown', function(e) {
  const key = e.key.toLowerCase();
  
  // 检查当前按键是否在映射表中
  if (charlist[key]) {
    // 阻止默认输入，避免原字符被写入
    e.preventDefault();
    
    // 处理光标位置，支持选中内容替换
    const startPos = this.selectionStart;
    const endPos = this.selectionEnd;
    const currentValue = this.value;
    
    // 拼接替换后的内容
    this.value = currentValue.slice(0, startPos) + charlist[key] + currentValue.slice(endPos);
    
    // 将光标移动到替换字符的后方
    this.selectionStart = this.selectionEnd = startPos + 1;
  }
});

关键细节说明 #

• 兼容大小写：通过toLowerCase()将按键转为小写，用户按大写A也能触发替换
• 光标处理：替换字符后自动调整光标位置，避免光标跳转到输入框末尾
• 选中内容替换：如果选中了一段文字再按目标按键，会直接用特殊字符替换选中的内容
• 扩展性：需要添加更多替换规则时，直接在charlist对象中添加新的键值对即可

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