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

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

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

相关推荐
昭昭颂桉a几秒前
TypeScript 前端的必修课,从 JS 到 TS
开发语言·前端·javascript·typescript
用户93851563507几秒前
从零实现一个 Todos 应用:原生 Ajax + Node 服务,顺便吃透 JSON.stringify
前端·javascript·后端
英勇无比的消炎药1 分钟前
少踩坑TinyVue插槽事件编码规范详解
vue.js
程序猿阿伟3 分钟前
《Chrome扩展:穿透沙箱与签名体系的技术本质》
前端·chrome
飘尘4 分钟前
豆包里一句话就能P图生视频,背后究竟发生了什么?
前端·人工智能·aigc
codeking9 分钟前
3 步把 AI 桌面自动化从失控拉回可用
javascript·架构
神明不懂浪漫16 分钟前
【第三章】CSS(一)——基础选择器、CSS的属性
前端·css·html·css3
IVEN_24 分钟前
本地正常,Docker 怎么就空白:Next.js SSR 的 Alpine musl DNS 陷阱
前端·docker·next.js
凡人叶枫24 分钟前
Effective C++ 条款24:若所有参数皆须要类型转换,请为此采用 non-member 函数
linux·前端·c++·算法·嵌入式开发
用户8876654266326 分钟前
Web3 前端实时通信如何落地:从 SSE 订阅到行情、订单与账户状态更新
前端·react.js·web3