前言

本文简单总结下文本输入中的 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 = "被插入的文本";