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

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

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

相关推荐
顽疲10 分钟前
java vue springboot 养老系统源码详解:退住 care_out 审批结算与腾床事务实践
java·vue.js·spring boot·vue养老·springboot养老·java养老
锋行天下13 分钟前
langgraph 循环节点的静态和动态实现
前端·后端
雪芽蓝域zzs16 分钟前
第 10 节:地图点击逆地理编码(点击地图获取经纬度 + 地址)
vue.js
斯内普吖19 分钟前
(开源)线上花店系统实战指南 基于 Java + SSM + Vue + MySQL
java·vue.js·mysql·开源
keyipatience32 分钟前
JS学习笔记(2)数组,函数,作用域,对象
前端·javascript·笔记·学习·html
2603_9651481134 分钟前
商品价格监控 API 接口:从原理到实战的完整指南
java·前端·数据库·python·生活
donk131440 分钟前
React Native for OpenHarmony 实战:三方库 react-native-segmented-control-tab 的鸿蒙化适配指南
javascript·react native·react.js·华为·harmonyos
酷虎软件1 小时前
视频加字幕怎么制作
java·前端·音视频
Geoffwo1 小时前
robotjs0.6.0鼠标中轴滚动失效修复方案
前端·javascript
彭亚川Allen1 小时前
从零手搓 RAG 之文档解析技术
前端·后端·架构