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);

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

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

相关推荐
m0_639817155 分钟前
基于springboot纺织品企业财务管理系统【带源码和文档】
java·服务器·前端
石小石Orz7 分钟前
qinkun的缓存机制也有弊端,建议官方个参数控制
前端
用户9714171814278 分钟前
Vue3实现拖拽排序
javascript·vue.js
用户40993225021215 分钟前
Vue浅响应式如何解决深层响应式的性能问题?适用场景有哪些?
前端·ai编程·trae
CC码码17 分钟前
重生之我在浏览器里“蹦迪”
前端·javascript·three.js
阡陌昏晨18 分钟前
H5性能优化-打开效率提升了62%
前端·javascript·vue.js
鹏北海19 分钟前
TypeScript 类型工具与 NestJS Mapped Types
前端·后端·typescript
烟袅19 分钟前
一文搞懂 CSS 定位:relative、absolute、fixed、sticky
前端·css
孟祥_成都19 分钟前
你离前端动画高手只差这个秘籍!GSAP ScrollTrigger 动画完全指南!(第一章)
前端·动效
小小前端_我自坚强20 分钟前
React 18 新特性深度解析
前端·javascript·react.js