Js 获取表单高亮选中的内容 和 设置文本选中内容

一、获取鼠标当前高亮选中的内容

这里的 el 为 获取到的表单元素

javascript 复制代码
//获取选中开始下标
let startIndex = el.selectionStart;
//获取选中结束下标
let endIndex = el.selectionEnd;
//获取表单选中内容
let selectedString = el.value.slice(startIndex,endIndex);

console.log(selectedString)

selectionStart: 当前选中的开始下标
selectionEnd: 当前选中的结束下标

如果没有文本被选中时, selectionStart 和 selectionEnd 的值是一样的,都为当前焦点的下标位置

二、设置表单文本内容选中

setSelectionRange(选中的开始下标,选中的结束下标)

javascript 复制代码
el.focus();
el.setSelectionRange(0,1);

上面代码将高亮选中第一个字符

如果设置的 开始下标 和 结束下标 一样时,会把当前输入焦点定位到指定的位置

相关推荐
故以往之不谏几秒前
JAVA--类和对象4.1--构造方法基础
java·开发语言·javascript
yivifu4 分钟前
接近完美的HTML文本双行合一排版
前端·javascript·html·双行合一
fxshy5 分钟前
前端直连模型 vs 完整 MCP:大模型驱动地图的原理与实践(技术栈Vue + Cesium + Node.js + WebSocket + MCP)
前端·vue.js·node.js·cesium·mcp
鹏程十八少7 分钟前
10. Android Shadow是如何实现像tinker热修复动态修复so(源码解析)
android·前端·面试
destinying11 分钟前
性能优化之项目实战:从构建到部署的完整优化方案
前端·javascript·vue.js
吃不胖爹11 分钟前
flutter项目如何打包,创建签名与配置签名
javascript·flutter·架构
英俊潇洒美少年12 分钟前
react如何实现双向绑定
javascript·react.js·ecmascript
我命由我1234514 分钟前
React - React Redux 数据共享、Redux DevTools、React Redux 最终优化
前端·javascript·react.js·前端框架·ecmascript·html5·js
英俊潇洒美少年14 分钟前
数据驱动视图 vue和react对比
javascript·vue.js·react.js
Jinuss16 分钟前
源码分析之React中的createContext/useContext详解
前端·javascript·react.js