当前位置: 首页 > news >正文

input 框如何移动光标,设置光标位置?

获取 input 光标位置

const inputDom = document.getElementById("input")
const selectionStart = inputDom.selectionStart

设置 input 光标

inputDom.focus()
// focus() 异步,所以加了 setTimeout
setTimeout(() => {const nextSelection = selectionStart + 1inputDom.setSelectionRange(nextSelection, nextSelection)
}, 0)
element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);
  • selectionStart: 被选中的第一个字符的位置索引, 从 0 开始。如果这个值比元素的 value 长度还大,则会被看作
    value 最后一个位置的索引。

  • selectionEnd: 被选中的最后一个字符的下一个位置索引。如果这个值比元素的 value 长度还大,则会被看作 value 最后一个位置的索引。

  • selectionDirection:选择方向。forward/backward/none 如果 selectionStart 与
    selectionEnd 相同,不选中任何,光标聚集在 selectionStart/selectionEnd。

     如果 selectionEnd 小于 selectionStart,不选中任何,光标聚集在在 selectionEnd。
    

inputDom.setSelectionRange(0, 4)表现如下图:

在这里插入图片描述

http://www.lryc.cn/news/95308.html

相关文章:

  • linux内核系统调用学习5:SYSCALL_DEFINE<0-6>
  • maven镜像仓库配置(多镜像自动切换)
  • ChatGPT在智能监控和安防系统中的应用如何?
  • 【Spring Boot Admin】介绍以及使用
  • 本地私有仓库部署、docker--harbor私有仓库部署和管理
  • java根据模板导出word
  • spring学习笔记十四
  • 【springmvc部分功能源码仿写第一步】实现java对目录下所有文件的遍历
  • SpringBoot中接口幂等性实现方案-自定义注解+Redis+拦截器实现防止订单重复提交
  • 论文解读|用于从RGB-D数据进行3D物体检测的Frustum PointNets
  • 3ds Max图文教程: 使用动态工具Mass FX 创建风铃动画
  • 抖音矩阵系统源码开发搭建部署分享
  • Grafana图形web监控的安装与配置
  • 【机器学习】了解 AUC - ROC 曲线
  • Docker 容器生命周期:创建、启动、暂停与停止----从创建到停止多角度分析
  • C++STL库中的vector
  • PHP 药店管理系统mysql数据库web结构apache计算机软件工程网页wamp
  • 【多选框、表格全选】element el-checkbox、el-table
  • 【Java】微服务负载均衡算法实现
  • 分类、回归常用损失函数
  • SaaS到底是什么,如何做?这份笔记讲明白了
  • Python 单继承、多继承、@property、异常、文件操作、线程与进程、进程间通信、TCP框架 7.24
  • 【英杰送书第三期】Spring 解决依赖版本不一致报错 | 文末送书
  • ClickHouse修改和删除操作
  • 比selenium体验更好的ui自动化测试工具: cypress介绍
  • Python编译过程和执行原理
  • opencv 图像距离变换 distanceTransform
  • 消息队列——rabbitmq的不同工作模式
  • QT实现用户登录注册功能
  • Docker--harbor私有仓库部署与管理