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

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

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

相关推荐
freewlt20 小时前
React Server Components 深度解析:从原理到实战的完整指南
前端·javascript·react.js
zhensherlock20 小时前
Protocol Launcher 系列:1Writer iOS 上的 Markdown 文档管理
javascript·笔记·ios·typescript·node.js·iphone·ipad
ZC跨境爬虫21 小时前
Playwright进阶操作:鼠标拖拽与各类点击实战(含自定义拖拽实例)
前端·爬虫·python·ui
小江的记录本21 小时前
【RabbitMQ】RabbitMQ核心知识体系全解(5大核心模块:Exchange类型、消息确认机制、死信队列、延迟队列、镜像队列)
java·前端·分布式·后端·spring·rabbitmq·mvc
心静财富之门21 小时前
《前端零基础入门:HTML + CSS + JavaScript 全套速查表(详细版 + 实例)》
前端·javascript·python
星空21 小时前
前端--A_4--HTML表单
前端
We་ct21 小时前
JS手撕:DOM操作 & 浏览器API高频场景详解
开发语言·前端·javascript·面试·状态模式·操作·考点
小江的记录本21 小时前
【RocketMQ】RocketMQ核心知识体系全解(5大核心模块:架构模型、事务消息两阶段提交、回查机制、延迟消息、顺序消息)
linux·运维·服务器·前端·后端·架构·rocketmq
三万棵雪松21 小时前
【Linux 物联网网关主控系统-Web部分(二)】
linux·前端·物联网
We་ct21 小时前
LeetCode 137. 只出现一次的数字 II:从基础到最优的两种解法详解
前端·数据结构·算法·leetcode·typescript·位运算