当前位置: 首页 > 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)表现如下图:

在这里插入图片描述

相关文章:

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

获取 input 光标位置 const inputDom document.getElementById("input") const selectionStart inputDom.selectionStart设置 input 光标 inputDom.focus() // focus() 异步,所以加了 setTimeout setTimeout(() > {const nextSelection selection…...

linux内核系统调用学习5:SYSCALL_DEFINE<0-6>

系统调用最大参数是6,由下面这个宏定义,位于文件include\linux\syscalls.h #define SYSCALL_DEFINE_MAXARGS 6 SYSCALL_DEFINE0(fork) fork:系统调用名。 SYSCALL_DEFINE1(set_tid_address, int __user *, tidptr) set_tid_address&#x…...

maven镜像仓库配置(多镜像自动切换)

大家在使用IDEA的时候会遇到这样的一个问题&#xff0c;就是在下载源代码和资源文档的时候&#xff0c;有些镜像仓库里面没有源代码和资源文档&#xff0c;然后会导致下载失败。 这时候就需要多个镜像仓库的地址了。 附上我自己的配置文件&#xff1a; <mirrors><!--…...

ChatGPT在智能监控和安防系统中的应用如何?

ChatGPT在智能监控和安防系统中有着广泛的应用潜力。智能监控和安防系统是利用人工智能和计算机视觉技术来实现对环境的实时监控和安全保障的系统。ChatGPT作为一种通用的预训练语言模型&#xff0c;可以在智能监控和安防系统中发挥以下作用&#xff1a; 1. **智能视频监控**&…...

【Spring Boot Admin】介绍以及使用

介绍 概述 Spring Boot Admin是一个监控工具&#xff0c;旨在以一种漂亮且易于访问的方式可视化Spring Boot Actuators提供的信息。 主要功能点 显示应用程序的监控状态应用程序上下线监控查看 JVM&#xff0c;线程信息可视化的查看日志以及下载日志文件动态切换日志级别Http…...

本地私有仓库部署、docker--harbor私有仓库部署和管理

部署本地私有仓库 拉取镜像 修改daemon.json配置文件 重启docker服务 创建容器 为镜像打标签 上传镜像 查看私有仓库 其他主机拉取私有仓库镜像 Docker--harbor私有仓库 &#xff08;1&#xff09;什么是Harbor Harbor 是 VMware 公司开源的企业级 Docker Registry 项目…...

java根据模板导出word

java根据模板导出word 日常开发中&#xff0c;常常会遇到各种各样的表格进行导出&#xff0c;比较好的办法就是提前弄好word模版&#xff0c;再通过遍历的方式进行导出文档 1、制作word模版 模版编写 内容替换 目标下面模版进行多页展示 将word转换成xml 将xml格式化 再将x…...

spring学习笔记十四

注解开发Bean总结 功能 xml配置注解定义Bean bean标签 id属性class属性 Component ControllerServiceRepositorComponentScan 设置依赖注入 setter注入(set方法) 引用类型/简单类型构造器注入 引用类型和简单类型自动装配 Autowired QualifierValue 配置第三方Bean be…...

【springmvc部分功能源码仿写第一步】实现java对目录下所有文件的遍历

废话不多说&#xff0c;直接上源码&#xff01; public class MiniSpring {public static void main(String[] args) {String path "D:\\ideaProject\\thread";File file new File(path);List<String> list new ArrayList<>();System.out.println(fi…...

SpringBoot中接口幂等性实现方案-自定义注解+Redis+拦截器实现防止订单重复提交

场景 SpringBootRedis自定义注解实现接口防刷(限制不同接口单位时间内最大请求次数)&#xff1a; SpringBootRedis自定义注解实现接口防刷(限制不同接口单位时间内最大请求次数)_redis防刷_霸道流氓气质的博客-CSDN博客 以下接口幂等性的实现方式与上面博客类似&#xff0c;…...

论文解读|用于从RGB-D数据进行3D物体检测的Frustum PointNets

原创 | 文 BFT机器人 01 摘要 论文研究了室内和室外场景中基于RGBD数据的3D目标检测。论文的方法不仅仅依赖于3D方案&#xff0c;而是利用成熟的2D对象检测器和先进的3D深度学习进行对象定位&#xff0c;即使是小对象也能实现高效率和高召回。 直接在原始点云中学习&#xff0…...

3ds Max图文教程: 使用动态工具Mass FX 创建风铃动画

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. 简单的场景设置 步骤 1 打开 3ds Max。 打开 3ds Max 步骤 2 我将向您展示风铃背后的动态 通过简单的场景设置进行模拟。一旦你有了这个想法&#xff0c;你就可以应用这个 技术到复杂的风铃结构。 基…...

抖音矩阵系统源码开发搭建部署分享

一、 功能开发设计 &#xff08;1&#xff09;数据概览&#xff1a;账号&#xff0c;视频top10数据统计 &#xff08;2&#xff09;AI视频创意&#xff1a;原创视频批量剪辑&#xff0c;阶乘算法&#xff0c;去重原理 &#xff08;3&#xff09;同城拓客&#xff1a;线下门店…...

Grafana图形web监控的安装与配置

目录 一、安装并配置 二、Web访问 三、Grafana启用zabbix插件 四、Grafana添加zabbix数据源 五、创建仪表盘 创建监控项完成保存仪表盘 六、查看创建的仪表盘 七、在现有的dashboard&#xff08;仪表盘&#xff09;中添加图形 八、查看最终dashborad&#xff08;仪表盘&#x…...

【机器学习】了解 AUC - ROC 曲线

一、说明 在机器学习中&#xff0c;性能测量是一项基本任务。因此&#xff0c;当涉及到分类问题时&#xff0c;我们可以依靠AUC - ROC曲线。当我们需要检查或可视化多类分类问题的性能时&#xff0c;我们使用AUC&#xff08;曲线下面积&#xff09;ROC&#xff08;接收器工作特…...

Docker 容器生命周期:创建、启动、暂停与停止----从创建到停止多角度分析

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…...

C++STL库中的vector

文章目录 vector的介绍及使用 vector深度剖析及模拟实现 动态二维数组理解 一、vector的介绍及使用 1.vector的介绍 1. vector是表示可变大小数组的序列容器。 2. 就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进…...

PHP 药店管理系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 药品管理系统 是一套完善的web设计系统,系统采用smarty框架进行开发设计&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 PHP 药店管理系统mysql数据库web结构apache计 下载地址…...

【多选框、表格全选】element el-checkbox、el-table

话不多说 先看效果&#xff1a; 多选框&#xff1a; 表格全选&#xff1a; <template><div><div class"titleLabel"><div class"lineStyle"></div>统计部门</div><div style"display: flex"><e…...

【Java】微服务负载均衡算法实现

前言 本篇实现一下分布式中负载均衡的实现策略&#xff0c;以及负载均衡算法是如何实现的。 什么是负载均衡&#xff1f; Java负载均衡是指在多台服务器之间分配负载&#xff0c;以提高服务器的性能和可用性。它通过将请求分发到多台服务器来减少单个服务器的压力&#xff0…...

软件信创方案(Word)

第1章 需求分析1.1 核心项目需求自主可控、资源池、云平台建设、运维运营管理、安全系统五大核心需求第2章 云平台基础设施设计2.1 改造目标与定位2.2 设计原则2.3 总体架构设计含网络架构、云平台整体架构2.4 资源配置设计含网络、计算、数据库、存储资源池及云管模块设计第3章…...

Excel 技巧:一键批量填充空值

&#x1f680; 操作步骤选中区域首先&#xff0c;用鼠标选中包含空值的目标数据区域。定位空值按下快捷键 Ctrl G 打开“定位”对话框&#xff1a;点击左下角的 「定位条件...」。选择 「空值」。点击「确定」。✅ 此时&#xff0c;区域内所有空白单元格已被高亮选中。输入公式…...

神经高利贷:预支未来技能导致认知崩溃

在软件测试领域&#xff0c;从业者常面临一个隐形威胁&#xff1a;过度追求新技能而忽视认知极限&#xff0c;最终引发崩溃。这种现象被称为“神经高利贷”&#xff0c;即通过预支未来学习能力来应对当前挑战&#xff0c;结果导致认知资源枯竭、错误率飙升&#xff0c;甚至职业…...

VSCode远程开发必备:SSH端口转发一键配置指南(含常见问题排查)

VSCode远程开发实战&#xff1a;SSH端口转发高效配置与深度排错 当你在咖啡厅修改代码时&#xff0c;远程服务器上的数据库服务突然需要紧急调试&#xff1b;当团队协作时&#xff0c;同事的内网API接口需要临时开放给你测试——这些场景下&#xff0c;SSH端口转发就像一把瑞士…...

行业观察2026年3月五家geo优化服务商实测对比与选型决策指南

在2026年3月的智能商业环境中&#xff0c;企业竞争的焦点已从信息曝光转向认知塑造。随着生成式AI全面接管用户的信息获取与决策流程&#xff0c;品牌若无法在AI的“思考”过程中占据一席之地&#xff0c;便意味着在未来的商业对话中失语。第三方独立数据显示&#xff0c;2025年…...

Java 17 新特性实战:现代 Java 开发的优雅实践

Java 17 新特性实战&#xff1a;现代 Java 开发的优雅实践 前言 大家好。最近很多读者朋友询问 Java 17 的新特性以及如何在项目中应用这些特性。作为一个长期使用 Java 的架构师&#xff0c;今天我想分享一下 Java 17 的新特性以及在实际项目中的应用经验。 Java 17 的核心新特…...

Proteus8.9 安装避坑指南:从下载到稳定运行的完整流程

1. 为什么选择Proteus8.9&#xff1f; Proteus作为电子设计自动化&#xff08;EDA&#xff09;领域的经典工具&#xff0c;在单片机仿真和电路设计方面一直备受工程师和学生青睐。8.9版本之所以成为众多用户的首选&#xff0c;主要在于它对新型单片机的支持更加完善。比如STC15…...

7-Zip ZS:六种压缩算法如何彻底改变你的文件处理体验

7-Zip ZS&#xff1a;六种压缩算法如何彻底改变你的文件处理体验 【免费下载链接】7-Zip-zstd 7-Zip with support for Brotli, Fast-LZMA2, Lizard, LZ4, LZ5 and Zstandard 项目地址: https://gitcode.com/gh_mirrors/7z/7-Zip-zstd 在数字时代&#xff0c;文件压缩已…...

ROS2机械臂实战:ros2_control、MoveIt2与move_group核心问题排查指南

1. ROS2机械臂控制栈的核心组件解析 搞ROS2机械臂开发的朋友应该都熟悉这个经典组合&#xff1a;ros2_control负责硬件接口&#xff0c;MoveIt2处理运动规划&#xff0c;move_group作为执行层。这三个组件就像机械臂控制的"三驾马车"&#xff0c;任何一个环节出问题都…...

WebSocket消息压缩终极指南:如何平衡性能与带宽的完整实践

WebSocket消息压缩终极指南&#xff1a;如何平衡性能与带宽的完整实践 【免费下载链接】async-http-client Asynchronous Http and WebSocket Client library for Java 项目地址: https://gitcode.com/gh_mirrors/as/async-http-client 在现代实时应用中&#xff0c;We…...