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

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

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

相关推荐
星河耀银海几秒前
框架结合:Vue+HTML5+AI实现智能前端应用开发
前端·vue.js·html5
等咸鱼的狸猫25 分钟前
# JS 核心六大主题:闭包内存模型、原型链查找、事件流机制与 Promise / Event Loop 实现视角复盘
前端·javascript
英勇无比的消炎药34 分钟前
还在手写对话面板?TinyRobot Container 一个组件装下整个 AI 聊天
vue.js
袋鱼不重1 小时前
乐观锁与悲观锁:原理、选型与前后端实践
前端·后端
Charonmomo1 小时前
react/antd - 不能正确打开标签页问题记录
前端·react.js·前端框架
gis开发之家2 小时前
vue3直击架构痛点 依赖倒置与接口隔离——打造坚如磐石的插件与高阶组件(HOC)模式
javascript·架构·typescript·前端框架·vue3
柒和远方2 小时前
LeetCode 139. 单词拆分 —— 从暴力回溯到 DP 完全背包
javascript·python·算法
用户2930750976692 小时前
流式输出:Vue 3 + DeepSeek API 实战
vue.js
先吃饱再说2 小时前
流式输出完全指南:让 AI 对话像打字机一样流畅
javascript·vue.js
冬枳2 小时前
基于OpenSeagragon封装的前端病理切片展示组件
前端·typescript