JS中的selection事件与range

前言

本文简单总结下文本输入中的 Selection 与 Range 事件。

测试地址见: 在线效果预览

::selection && Selection

自定义选取颜色

项目中一般有主题色的需求，这时候可以通过 css 中的::selection伪类可以自定义选中背景颜色

::selection {
  background: yellow;
}

   
   

去除第三方的 UI 库的选取选中可能要自定义 css 插件

// 去除antd样式文件中的 ::selection，原因是::selection难以被取消
module.exports = function runtime(params) {
  return params.replace(/::selection \{[^}]+\}/g, "");
};

   
   

Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生.

var selObj = window.getSelection();
var range = selObj.getRangeAt(0);

   
   

selObj 被赋予一个 Selection 对象, range 被赋予一个 Range 对象

selection 事件

document.addEventListener("selectionchange", () => {
  const selection = window.getSelection();
  if (selection.toString()) {
    const selectedText = selection.toString();
    document.querySelector("#text-selected").textContent = selectedText;
  }
});

   
   

可编辑元素的选中

1. 主动选中某一区域

// 主动选中文本框中的一部分文本
function selectText() {
  const inputElement = document.getElementById("text-input");
  inputElement.setSelectionRange(2, 4);
  inputElement.focus();
}

   
   

2. 聚焦到某一位置

// 将光标聚焦到Textarea元素的指定位置
function focusCursor() {
  const textareaElement = document.getElementById("textarea");
  textareaElement.focus();
  textareaElement.setSelectionRange(10, 10); // 聚焦到第10个字符
}

   
   

3. 在指定选区插入（替换）内容

// 在Textarea的指定选区位置插入文本
function insertText() {
  const textareaElement = document.getElementById("textarea");
  const selectionStart = textareaElement.selectionStart;
  const selectionEnd = textareaElement.selectionEnd;
  const textToInsert = "被插入的文本";