Safari中使用setSelectionRange时如何避免自动聚焦目标元素？

核心原因 #

Safari的setSelectionRange方法在调用时会强制将焦点转移到目标输入框，这和Chrome的行为存在差异，导致操作日历面板时焦点被意外切换到输入框。

简洁解决方案 #

方案1：焦点回退法

先记录当前的焦点元素，执行setSelectionRange后将焦点切回原元素：

// 保存当前活跃的焦点元素
const currentFocus = document.activeElement;

// 更新输入框值并设置选区
yourInputElement.value = formattedDate;
yourInputElement.setSelectionRange(selectionStart, selectionEnd);

// 若原焦点不是输入框，恢复焦点
if (currentFocus !== yourInputElement) {
  currentFocus.focus();
}

这个方法兼容性好，跨浏览器通用，Chrome中执行不会产生任何副作用。

方案2：条件性设置选区

仅当输入框本身处于焦点状态时，才调用setSelectionRange：

yourInputElement.value = formattedDate;
// 仅在输入框有焦点时维护选区
if (document.activeElement === yourInputElement) {
  yourInputElement.setSelectionRange(selectionStart, selectionEnd);
}

这种思路更贴合实际场景——用户操作日历面板时，原本就不需要输入框获得焦点，此时设置选区没有实际意义，只在用户主动聚焦输入框时处理选区即可。

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