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

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

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

相关推荐
西洼工作室1 天前
前端接口安全与性能优化实战
前端·vue.js·安全·axios
大布布将军1 天前
《前端九阴真经》
前端·javascript·经验分享·程序人生·前端框架·1024程序员节
幸运小圣1 天前
for...of vs for 循环全面对比【前端JS】
开发语言·前端·javascript
用户9545156811621 天前
实际开发中 | 与 || 的使用方法及组件封装方案解析
前端
得帆云低代码1 天前
COC Asia 2025|得帆云 ETL:顺应 Hive 新特性,重塑数据管道的未来
前端
十字路口的火丁1 天前
前端开发如何灵活使用 css 变量
前端
_志哥_1 天前
深度解析:解决 backdrop-filter 与 border-radius 的圆角漏光问题
前端·javascript·html
南囝coding1 天前
100% 用 AI 做完一个新项目,从 Plan 到 Finished 我学到了这些
前端·后端
qiao若huan喜1 天前
10、webgl 基本概念 + 坐标系统 + 立方体
前端·javascript·信息可视化·webgl
前端一课1 天前
Vue3 的 Composition API 和 Options API 有哪些区别?举例说明 Composition API 的优势。
前端