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

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

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

相关推荐
泯泷19 小时前
Tiptap 深度教程(四):终极定制 - 从零创建你的专属扩展
前端·javascript·架构
局i19 小时前
vue简介
前端·javascript·vue.js
yqcoder19 小时前
vue2 和 vue3 中,列表中的 key 值作用
前端·javascript·vue.js
U***498319 小时前
前端TypeScript教程汇总,从基础到高级
前端·javascript·typescript
梵得儿SHI19 小时前
Vue 指令系统:事件处理与表单绑定全解析,从入门到精通
前端·javascript·vue.js·v-model·v-on·表单数据绑定·表单双向绑定
IT_陈寒19 小时前
Vue3性能优化实战:我从这5个技巧中获得了40%的渲染提升
前端·人工智能·后端
二川bro19 小时前
第45节:分布式渲染:Web Workers多线程渲染优化
开发语言·javascript·ecmascript
lcc18719 小时前
Vue props
前端·vue.js
落霞的思绪19 小时前
Cesium里的postProcessStages实现暗黑样式的天地图
前端·gis·cesium
DevUI团队19 小时前
🔥Angular开发者看过来:不止于Vue,MateChat智能化UI库现已全面支持Angular!
前端·人工智能·angular.js