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

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

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

相关推荐
sorryhc5 分钟前
React SSR同构渲染方案是什么?
前端·javascript·next.js
小公主14 分钟前
别再乱用异步了!一文搞懂 Promise 和 async/await 的执行顺序与最佳实践
javascript
南枝异客24 分钟前
电话号码的字母组合
开发语言·javascript·算法
护国神蛙1 小时前
给你一个页面如何定时刷新
前端·javascript·浏览器
一直游到海水变蓝丿1 小时前
el-select下拉框 添加 el-checkbox 多选框
前端·javascript·vue.js
罗政1 小时前
基于 SpringBoot + Vue 在线点餐系统(前后端分离)
vue.js·spring boot·后端
阿奇__2 小时前
element 跨页选中,回显el-table选中数据
前端·vue.js·elementui
努力往上爬de蜗牛2 小时前
vue3 daterange正则踩坑
javascript·vue.js·elementui
谢尔登2 小时前
【React】SWR 和 React Query(TanStack Query)
前端·react.js·前端框架
断竿散人2 小时前
专题一、HTML5基础教程-Viewport属性深入理解:移动端网页的魔法钥匙
前端