Firefox中input/textarea的Selection.modify失效问题及替代方案咨询

现象复现 #

测试代码如下：

JavaScript #

const input = document.querySelector('#input');
const textarea = document.querySelector('#textarea');
const div = document.querySelector('div');
const x = (e) => {
  if (e.key === 'b') {
    const sel = document.getSelection();
    sel.modify('move', 'left', 'character');
  }
};
input.addEventListener('keyup', x);
textarea.addEventListener('keyup', x);
div.addEventListener('keyup', x);

HTML #

<input type="text" id="input">
<textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
<div contenteditable></div>

在Chrome 116中，按下b键后，所有可编辑元素都会输入b且光标左移至b前方；但Firefox 116中仅contenteditable的<div>能触发光标左移，<input>和<textarea>中Selection.modify('move', 'left', 'character')完全无效。

是否属于Bug #

是的，这是Firefox的已知兼容性Bug。尽管MDN文档标注Firefox完全支持Selection.modify()，但实际上该API在表单控件（<input>/<textarea>）中存在功能限制，相关问题已在Firefox官方Bug跟踪系统中被记录。

替代方案 #

针对表单控件的兼容写法 #

使用<input>和<textarea>原生的selectionStart/selectionEnd属性手动调整光标位置，这是所有主流浏览器都支持的标准方案：

const input = document.querySelector('#input');
const textarea = document.querySelector('#textarea');
const div = document.querySelector('div');

const adjustCaret = (e) => {
  if (e.key === 'b') {
    const target = e.target;
    // 处理input/textarea
    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
      // 光标左移一位，避免出现负数索引
      const newPos = Math.max(0, target.selectionStart - 1);
      target.selectionStart = target.selectionEnd = newPos;
    } else {
      // 处理contenteditable元素，保留原逻辑
      const sel = document.getSelection();
      sel.modify('move', 'left', 'character');
    }
  }
};

input.addEventListener('keyup', adjustCaret);
textarea.addEventListener('keyup', adjustCaret);
div.addEventListener('keyup', adjustCaret);

通用封装方案 #

可以封装一个工具函数，自动适配不同元素类型，确保跨浏览器行为一致：

function moveCaretLeft(elem) {
  if (elem.tagName === 'INPUT' || elem.tagName === 'TEXTAREA') {
    const newPos = Math.max(0, elem.selectionStart - 1);
    elem.selectionStart = elem.selectionEnd = newPos;
  } else if (elem.isContentEditable) {
    const sel = document.getSelection();
    sel.modify('move', 'left', 'character');
  }
}

// 使用示例
const input = document.querySelector('#input');
input.addEventListener('keyup', (e) => {
  if (e.key === 'b') moveCaretLeft(e.target);
});

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