iPad端IndexSizeError问题求助：selection.getRangeAt(0)报错

问题概述 #

• 预期行为：selection.getRangeAt(0) 不应报错
• 实际行为：抛出 IndexSizeError: The index is not in the allowed range 错误
• 出现平台：iPad
• 正常运行平台：谷歌浏览器、桌面端Safari浏览器
• 已尝试过iOS 12下getSelection相关问题的解决方案，但无效。

解决建议 #

1. 先校验选区有效性
   调用getRangeAt(0)前，必须检查选区的rangeCount是否大于0，从根源避免索引越界：

const selection = window.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // 执行后续逻辑
}

2. 适配iPad选区延迟特性
   iPad的Safari处理文本选区时可能存在延迟，尤其是用户刚完成选择就触发代码的场景。可以通过监听selectionchange事件确保选区稳定后再处理：

document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    // 处理选区逻辑
  }
});

3. 手动创建兜底选区
   如果iPad端存在选区未正确初始化的情况，可以手动创建选区并绑定到目标元素：

const targetElement = document.getElementById('your-target-element');
targetElement.focus();
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(targetElement);
selection.removeAllRanges();
selection.addRange(range);

4. 确认元素可编辑状态
   确保目标元素设置了contenteditable="true"，iPad端对不可编辑元素的选区处理逻辑和桌面端存在差异。

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