JavaScript：快捷键插入特殊字符后将焦点定位在该字符上

数据老陈

2026-8-21

实现思路

核心逻辑

通过操作textarea的选区API，精准控制插入字符后的光标/选中范围，步骤如下：

记录初始位置：插入字符前，获取当前textarea的selectionStart（光标起始位置）和selectionEnd（光标结束位置）。
插入目标字符：使用setRangeText方法在指定位置插入字符，该方法可直接替换选中内容或在光标处插入。
定位到目标字符：计算新的选区范围——起始位置为原光标起始点，结束位置为起始点加上插入字符的长度，调用setSelectionRange设置该范围，实现选中刚插入的字符（即光标“定位”在字符上）。
确保焦点：最后调用focus()保证textarea处于激活状态。

代码示例

基础插入与定位

const textarea = document.querySelector('textarea');
const targetChar = '■'; // 要插入的字符

// 获取初始光标位置
const start = textarea.selectionStart;
const end = textarea.selectionEnd;

// 插入字符
textarea.setRangeText(targetChar, start, end, 'end');

// 选中刚插入的字符
textarea.setSelectionRange(start, start + targetChar.length);

// 确保textarea获得焦点
textarea.focus();

快捷键触发场景

如果是通过自定义快捷键触发插入，需要监听keydown事件并阻止默认行为：

const textarea = document.querySelector('textarea');

textarea.addEventListener('keydown', (e) => {
  // 示例快捷键：Ctrl+Shift+S
  if (e.ctrlKey && e.shiftKey && e.key === 'S') {
    e.preventDefault(); // 阻止浏览器默认快捷键操作
    const targetChar = '■';
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    textarea.setRangeText(targetChar, start, end, 'end');
    textarea.setSelectionRange(start, start + targetChar.length);
    textarea.focus();
  }
});