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

news2024/12/23 5:21:48

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

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

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

 const 未来之窗_光标技术_insert = (文本框元素, content) => {
                const 当前文本内容 = 文本框元素.value
                const 光标开始位置 = 文本框元素.selectionStart
                const 光标结束位置 = 文本框元素.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.coloradmin.cn/o/1307504.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Nginx【通俗易懂】《中篇》

目录 1.Url重写rewrite 2.防盗链 3.静态资源压缩 4.跨域问题 1.Url重写rewrite &#x1f929;&#x1f929;&#x1f929; 1.1.rewrite书写格式 rewrite是实现URL重写的关键指令&#xff0c;根据regex&#xff08;正则表达式&#xff09;部分内容&#xff0c;重定向到rep…

Jetpack Startup 优雅完成库的初始化和方法接口简化

目录 1.Startup组件是什么2.Startup组件能做啥2.1 startup组件可以简化用户使用我们提供的库的流程。2.2 简化库提供给使用者的API接口 3.如何使用Startup组件3.1 引入依赖3.2 创建一个初始化的类继承Initializer3.3 在我们库的AndroidManifest.xml中加入配置 4.使用Startup组件…

Windows mysql5.7 执行查询/开启/测试binlog---简易记录

前言&#xff1a;基于虚拟机mysql版本为5.7&#xff0c;增量备份测试那就要用到binlog… 简述&#xff1a;二进制日志&#xff08;binnary log&#xff09;以事件形式记录了对MySQL数据库执行更改的所有操作。 binlog是记录所有数据库表结构变更&#xff08;例如CREATE、ALTER…

C++相关闲碎记录(9)

1、非修改型算法 for_each()对每个元素执行某种操作count()返回元素个数count_if()返回满足某一条件的元素的个数min_element()返回最小值元素max_element()返回最大值元素minmax_element()返回最小值和最大值元素find()查找某个数值find_if()查找满足条件的元素find_if_not()…

03 Temporal 详细介绍

前言 在后端开发中&#xff0c;大家是否有遇到如下类型的开发场景 需要处理较多的异步事件需要的外部服务可靠性较低需要记录保存某个对象的复杂状态 在以往的开发过程中&#xff0c;可能更多的直接使用数据库、定时任务、消息队列等作为基础&#xff0c;来解决上面的问题。然…

【概率方法】MCMC 之 Gibbs 采样

上一篇文章讲到&#xff0c;MCMC 中的 HM 算法&#xff0c;它可以解决拒绝采样效率低的问题&#xff0c;但是实际上&#xff0c;当维度高的时候 HM 算法还是在同时处理多个维度&#xff0c;以两个变量 x [ x , y ] \mathbf{x} [x,y] x[x,y] 来说&#xff0c;也就是同时从联合…

Nyquist Theorem(取样定理)

取样定理&#xff0c;又称为奈奎斯特定理&#xff08;Nyquist Theorem&#xff09;&#xff0c;是信号处理领域中一项至关重要的基本原理。它规定了对于连续时间信号&#xff0c;为了能够完全准确地还原出原始信号&#xff0c;即使是在离散时间下进行采样和再构建&#xff0c;都…

算法基础之树的重心

树的重心 无向图: 边没有方向 有向图:边有方向 只能单向询问 无向图建立双向的边 要求输出每种情况连通块个数最大值的最小值**(最小的最大值)** #include <cstdio>#include <cstring>#include <iostream>#include <algorithm>using namespace s…

2023-12-13 VsCode + CMake + Qt环境搭建

点击 <C 语言编程核心突破> 快速C语言入门 VsCode CMake Qt环境搭建 前言一、前期准备二、具体设置总结 前言 要解决问题: 最近研究 Qt, 使用 qtcreator, 发现在搭建 UI 界面时候很方便, 但到编码和调试就比较有问题了. 想到的思路: 用 VSCode 进行编码及调试. 其它…

003 FeedForward前馈层

一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17torch 1.13.1cu117torchvision 0.14.1cu117 二、前馈层原理 Transformer模型中的前馈层&#xff08;Feed Forward Layer&#xff09;是其关键组件之一&#xff0c;对于模型的性能起着重要作用。下面将用900字对…

postman接口测试系列: 时间戳和加密

在使用postman进行接口测试的时候&#xff0c;对于有些接口字段需要时间戳加密&#xff0c;这个时候我们就遇到2个问题&#xff0c;其一是接口中的时间戳如何得到&#xff1f;其二就是对于现在常用的md5加密操作如何在postman中使用代码实现呢&#xff1f; 下面我们以一个具体的…

【EXCEL】数据透视实例

相关链接&#xff1a;Excel数据透视表全攻略 数据样例&#xff1a; 透视结果&#xff1a;

分析某款go端口扫描器之三

一、概述 前两篇主要分析些工具集&#xff0c;已经针对web服务的指纹和端口指纹信息进行识别&#xff0c;并没有真正开始扫描。本篇主要分析如何进行IP存活探测以及tcp扫描实现。 项目来源&#xff1a;https://github.com/XinRoom/go-portScan/blob/main/util/file.go 二、/…

云架构俭约之道七法则(The Frugal Architect)

文章目录 一、前言关于 Law 与 Rule 的区别 二、云架构俭约之道七法则Design&#xff08;设计方面&#xff09;Law 1&#xff1a;把成本作为非功能性需求Law 2&#xff1a;可持续性系统需要将成本与业务相匹配Law 3&#xff1a;架构设计是一系列权衡的取舍 Measure&#xff08;…

Unity | 渡鸦避难所-2 | 搭建场景并添加碰撞器

1 规范项目结构 上期中在导入一系列的商店资源包后&#xff0c;Assets 目录已经变的混乱不堪 开发过程中&#xff0c;随着资源不断更新&#xff0c;遵循一定的项目结构和设计规范是非常必要的。这可以增加项目的可读性、维护性、扩展性以及提高团队协作效率 这里先做下简单的…

vivado约束方法2

排序约束条件 因为XDC约束是按顺序应用的&#xff0c;并且是基于明确的优先级排列的规则&#xff0c;您必须仔细检查约束的顺序。 Vivado IDE为您的设计提供了全面的可视性。要逐步验证约束&#xff0c;请执行以下操作&#xff1a; 1.运行相应的报告命令。 2.查看Tcl控制台…

微信小程序自定义提示框组件并使用插槽 tooltip

创建tooltip组件引用 创建一个自定义组件&#xff0c;例如命名为 tooltip tooltip.wxml&#xff1a;用于定义组件的结构&#xff1b; <!--components/tooltip/tooltip.wxml--> <view class"tooltip-wrapper" hidden"{{hidden}}" style"lef…

spingboot项目实战之若依框架创建新模块

前言 目前的脚手架系统很多&#xff0c;比较早接触诺依框架&#xff0c;以若依框架为参考如何创建新模块 步骤 1. 下载诺依框架&#xff0c;依照参考说明一步步&#xff0c;能做到系统运行起来。 2. 准备好mysql文件&#xff0c;创建新数据库表 3. 数据库管理工具navicat…

如何退回chrome旧版ui界面?关闭Chrome浏览器新 UI 界面

之前启用新UI的方式 Chrome 已经很久没有进行过大的样式修改&#xff0c;但近期在稳定分支中添加了新的 flags 实验性标志&#xff0c;带来了全新的设计与外观&#xff0c;启用方式如下&#xff1a; 在 Chrome 浏览器的搜索栏中输入并访问 chrome://flags 搜索“refresh 2023…

Leetcode 46 全排列

题意理解&#xff1a; 首先明确全排列是什么&#xff1f; 使用集合里所有的元素&#xff0c;使用不同的顺序进行排列&#xff0c;所有的排列集合即为全排列。 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 这里的元素不会…