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

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

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

相关推荐
豆苗学前端几秒前
企业级用户登录Token存储最佳实践,吊打面试官
前端·javascript·后端
李剑一1 分钟前
vite框架下大屏适配方案
前端·vue.js·响应式设计
胖虎2651 分钟前
从零搭建 Vue3 富文本编辑器:基于 Quill可扩展方案
vue.js
有点笨的蛋2 分钟前
HTML5 敲击乐:从静态页面到动态交互的前端实战
前端·html
文心快码BaiduComate10 分钟前
冰城码力全开,共赴AI Coding英雄之旅!CEDxCNCC百度文心快码Meetup圆满落幕!
前端·后端·程序员
inx17710 分钟前
HTML 敲击乐 PART--2
javascript·css
社恐的下水道蟑螂15 分钟前
用CSS3拍一部《星球大战》片头?前端导演的"原力"修炼指南
前端·javascript
子非鱼37319 分钟前
git 常用命令行
前端
Tzarevich21 分钟前
CSS3星球大战:前端代码界的视觉导演艺术
前端·css
BBB努力学习程序设计22 分钟前
CSS复合选择器
前端·html