点击input时如何保留textarea中的文本选中状态

当点击input时，textarea失去焦点，浏览器默认会取消文本选中状态。可以通过JavaScript保存并恢复选中范围来解决这个问题：

实现步骤 #

1. 给textarea和input添加ID以便获取元素
2. 监听textarea的blur事件，保存选中的起始和结束位置
3. 监听input的focus事件，临时恢复textarea的选中状态后再将焦点切回input

完整代码示例 #

<textarea id="myTextarea" style="width: 500px; height: 500px">
  Test data
</textarea>

<input id="myInput">

<script>
const textarea = document.getElementById('myTextarea');
const input = document.getElementById('myInput');
let savedRange = { start: 0, end: 0 };

// 保存选中范围
textarea.addEventListener('blur', () => {
  savedRange.start = textarea.selectionStart;
  savedRange.end = textarea.selectionEnd;
});

// 恢复选中状态
input.addEventListener('focus', () => {
  setTimeout(() => {
    // 临时聚焦textarea恢复选中
    textarea.focus();
    textarea.setSelectionRange(savedRange.start, savedRange.end);
    // 切回input焦点
    input.focus();
  }, 0);
});
</script>

原理说明 #

浏览器元素失去焦点时会自动清除文本选中状态，我们通过以下流程规避这个默认行为：

• 当textarea即将失去焦点时，记录用户选中的文本范围
• 当input获得焦点后，短暂让textarea重新聚焦并恢复之前记录的选中范围，再将焦点切回input，这样textarea的选中样式就会保持可见，同时input也能正常获取焦点进行输入

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