如何用JavaScript获取/设置文本框选中范围？Firefox多选操控方法

你说得完全没错，selectionStart和selectionEnd确实只能搞定最后一个选中的区域，要在Firefox里操控那些按住Ctrl创建的多选区，得用Selection和Range这两个API来配合，咱们来一步步拆解：

获取多选中范围列表 #

首先，你可以通过document.getSelection()拿到当前页面的Selection对象，这个对象里的rangeCount属性直接告诉你现在有多少个选中区域——多选区的话这个数值会大于1。

接下来用getRangeAt(index)方法遍历每一个选区，每个Range对象都包含了这个选区的起始和结束位置。针对文本框（不管是<textarea>还是单行<input>），你可以先确认选区的容器是不是目标文本框，然后提取偏移量：

const targetInput = document.querySelector('textarea');
const selection = document.getSelection();
const multiSelections = [];

if (selection.rangeCount > 0) {
  for (let i = 0; i < selection.rangeCount; i++) {
    const range = selection.getRangeAt(i);
    // 确保这个选区属于我们要操作的文本框
    if (range.startContainer === targetInput && range.endContainer === targetInput) {
      multiSelections.push({
        start: range.startOffset,
        end: range.endOffset
      });
    }
  }
}
console.log('当前所有选中区域:', multiSelections);

设置多选中范围 #

要手动创建多选区也很简单，先清空现有选区，然后逐个创建Range对象并添加到Selection里就行：

const targetInput = document.querySelector('textarea');
const selection = document.getSelection();

// 先清空当前所有选中内容
selection.removeAllRanges();

// 创建第一个选区：从第0个字符到第5个字符
const range1 = document.createRange();
range1.setStart(targetInput, 0);
range1.setEnd(targetInput, 5);
selection.addRange(range1);

// 创建第二个选区：从第10个字符到第15个字符
const range2 = document.createRange();
range2.setStart(targetInput, 10);
range2.setEnd(targetInput, 15);
selection.addRange(range2);

一些关键注意点 #

• 这个多选区特性目前只有Firefox支持，Chrome、Edge这些Chromium内核浏览器还没实现，所以在这些浏览器里rangeCount永远是1，只能处理单个选区
• 单行<input>的多选区支持在Firefox里可能有小限制，测试的时候优先用<textarea>会更稳妥
• 用户手动用Ctrl+选出来的多选区，完全可以通过上面的方法获取到所有区域，而selectionStart/selectionEnd只会返回最后一个选区的位置，这也是你之前发现的问题所在

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