textarea 网页文本框在光标处添加内容

在前端研发中我们经常需要使用脚本在文本框中插入内容。如果产品要求不能直接插入开始或者尾部,而是要插入到光标位置,此时我们就需要获取光标/光标选中的位置。

很多时候,我在格式化文本处需要选择选项,将选择的信息输入到光标位置

selectionStart & selectionEnd
这两个属性分别对应选中区域的开始位置和结束位置,当没有选中任何内容的时候,两个值相等并且值为光标位置。

 const 未来之窗_光标技术_insert = (文本框元素, content) => {const 当前文本内容 = 文本框元素.valueconst 光标开始位置 = 文本框元素.selectionStartconst 光标结束位置 = 文本框元素.selectionEnd文本框元素.value = 当前文本内容.substring(0, 光标开始位置) + content + 当前文本内容.substring(光标结束位置);}function  未来之窗_前端技术_插入当前(eleid,value){var textAreaElement=document.getElementById(eleid);未来之窗_光标技术_insert(textAreaElement,value);}

html

	<button id="" type="" onclick="未来之窗_前端技术_插入当前('wlzc_content','0000000000');">插入</button>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/219083.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于“Python”的核心知识点整理大全25

目录 10.3.4 else 代码块、 10.3.5 处理 FileNotFoundError 异常 alice.py 在这个示例中&#xff0c;try代码块引发FileNotFoundError异常&#xff0c;因此Python找出与该错误匹配的 except代码块&#xff0c;并运行其中的代码。最终的结果是显示一条友好的错误消息&#x…

基于循环神经网络长短时记忆(RNN-LSTM)的大豆土壤水分预测模型的建立

Development of a Soil Moisture Prediction Model Based on Recurrent Neural Network Long Short-Term Memory in Soybean Cultivation 1、介绍2、方法2.1 数据获取2.2.用于预测土壤湿度的 LSTM 模型2.3.土壤水分预测的RNN-LSTM模型的建立条件2.4.预测土壤水分的RNN-LSTM模型…

【ArkTS】Watch装饰器

Watch装饰器&#xff0c;相当于Vue中的监听器 以及 React中使用useEffect监听变量 使用Watch装饰器&#xff0c;可以监听一个数据的变化&#xff0c;并进行后续的响应。 使用方法&#xff1a; Watch(‘回调函数’)&#xff0c;写在State装饰器后&#xff08;其实写在前面也行&a…

LabVIEW开发地铁运行安全监控系统

LabVIEW开发地铁运行安全监控系统 最近昌平线发生的故障事件引起了广泛关注&#xff0c;暴露了现有地铁运行监控系统在应对突发情况方面的不足。为了提高地铁系统的运行安全性&#xff0c;并防止类似事件再次发生&#xff0c;提出了一套全面的地铁运行安全监控系统方案。此方案…

[Verilog] Verilog 基本格式和语法

主页&#xff1a; 元存储博客 全文 3000 字 文章目录 1. 声明格式1.1 模块声明1.2 输入输出声明1.3 内部信号声明1.4 内部逻辑声明1.5 连接声明1.6 数据类型声明1.7 运算符和表达式1.8 控制结构 2. 书写格式2.1 大小写2.2 换行2.3 语句结束符2.4 注释2.5 标识符2.6 关键字 1. 声…

python/c++ Leetcode题解——746. 使用最小花费爬楼梯

目录 方法一&#xff1a;动态规划 复杂度分析 方法一&#xff1a;动态规划 假设数组 cost 的长度为 n&#xff0c;则 n 个阶梯分别对应下标 0 到 n−1&#xff0c;楼层顶部对应下标 n&#xff0c;问题等价于计算达到下标 n 的最小花费。可以通过动态规划求解。 创建长度为 n…

【面试】测试/测开(NIG2)

145. linux打印前row行日志 参考&#xff1a;linux日志打印 前10行日志 head -n 10 xx.log后10行日志 tail -n 10 xx.log tail -10f xx.log使用sed命令 sed -n 9,10p xx.log #打印第9、10行使用awk命令 awk NR10 xx.log #打印第10行 awk NR>7 && NR<10 xx.log …

爬虫 selenium语法 (八)

目录 一、为什么使用selenium 二、selenium语法——元素定位 1.根据 id 找到对象 2.根据标签属性的属性值找到对象 3.根据Xpath语句获取对象 4.根据标签名获取对象 5.使用bs语法获取对象 6.通过链接文本获取对象 三、selenium语法——访问元素信息 1.获取属性的属性值…

MySQL 常用数据类型总结

面试&#xff1a; 为什么建表时,加not null default ‘’ / default 0 答:不想让表中出现null值. 为什么不想要的null的值 答:&#xff08;1&#xff09;不好比较,null是一种类型,比较时,只能用专门的is null 和 is not null来比较. 碰到运算符,一律返回null &#xff08…

ES-模糊查询

模糊查询 1 wildcard 准备数据 POST demolike/_bulk {"index": {"_id": "1"} } {"text": "草莓熊是个大坏蛋" } {"index": {"_id": "2"} } {"text": "wolf 也是一个坏蛋&q…

C# WPF上位机开发(树形控件在地图软件中的应用)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们聊过图形软件的开发方法。实际上&#xff0c;对于绘制的图形&#xff0c;我们一般还会用树形控件管理一下。举个例子&#xff0c;一个地图…

云原生之深入解析使用Telepresence轻松在本地调试和开发Kubernetes应用程序

一、 准备 telepresence 下载&#xff1a;https://www.telepresence.io/docs/latest/install/kubectl 下载&#xff1a;https://kubernetes.io/docs/tasks/tools/ 二、版本检测 $telepresence version Client: v2.5.3 (api v3) Root Daemon: not running User Daemon: not r…

Wordle 游戏实现 - 使用 C++ Qt

标题&#xff1a;Wordle 游戏实现 - 使用 C Qt 摘要&#xff1a; Wordle 是一款文字猜词游戏&#xff0c;玩家需要根据给定的单词猜出正确的答案&#xff0c;并在限定的次数内完成。本文介绍了使用 C 和 Qt 框架实现 Wordle 游戏的基本思路和部分代码示例。 引言&#xff1a;…

前后端传参中遇见的问题

前后端传参经常容易出错&#xff0c;本文记录开发springBootMybatis-plusvuecli项目中出现的传参问题及解决办法 1.前后端没有跨域配置&#xff0c;报错 解决方法&#xff1a;后端进行跨域配置&#xff0c;拷贝CorsConfig类 package com.example.xxxx.config;import org.spr…

早上好,我的leetcode 【hash】(第二期)

写在前面&#xff1a;坚持才是最难的事情 C代码还是不方便写&#xff0c;改用python了&#xff0c;TAT 文章目录 1.两数之和49. 字母异位词分组128.最长连续序列 1.两数之和 你好&#xff0c;梦开始的地方~ https://leetcode.cn/problems/two-sum/description/?envTypestudy…

HiveSql语法优化三 :join优化

前面提到过&#xff1a;Hive拥有多种join算法&#xff0c;包括Common Join&#xff0c;Map Join&#xff0c;Bucket Map Join&#xff0c;Sort Merge Buckt Map Join等&#xff1b;每种join算法都有对应的优化方案。 Map Join 在优化阶段&#xff0c;如果能将Common Join优化为…

【docker 】基于Dockerfile创建镜像

Dockerfile文档 Dockerfile文档地址 Dockerfile 是一个用来构建镜像的文本文件&#xff0c;文本内容包含了一条条构建镜像所需的指令和说明。 DockerFile 可以说是一种可以被 Docker 程序解释的脚本&#xff0c;DockerFile 是由一条条的命令组成的&#xff0c;每条命令对应 …

RT-DETR优化:ASF-YOLO提取多尺度特征 | 2023年12月最新成果

🚀🚀🚀本文改进: ASF-YOLO一种新的特征融合网络架构,该网络由两个主要的组件网络组成,可以为小目标分割提供互补的信息:(1)SSFF模块,它结合了来自u;(2)TFE模块,它可以捕获小目标的局部精细细节等 🚀🚀🚀YOLOv8改进专栏:http://t.csdnimg.cn/hGhVK 学姐带你学…

AUTOSAR组织引入了Rust语言的原因是什么?有哪些好处?与C++相比它有什么优点?并推荐一些入门学习Rust语言链接等

AUTOSAR(汽车开放系统架构)是一个由汽车制造商、供应商和其他来自电子、半导体和软件行业的公司组成的全球发展伙伴关系,自2003年以来一直致力于为汽车行业开发和引入开放、标准化的软件平台。 AUTOSAR 最近宣布成立一个新的工作组,用于探索在汽车软件中使用 Rust 编程语言…

R语言|分面中嵌入趋势线

简介 关于分面的推文&#xff0c;小编根据实际科研需求&#xff0c;已经分享了很多技巧。例如&#xff1a; 分面中添加不同表格 分面中添加不同的直线 基于分面的面积图绘制 分面中的细节调整汇总 基于分面的折线图绘制 最近科研中又遇到了与分面相关的需求&#xff1a;…