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

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

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

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.mfbz.cn/a/242760.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

共建开源新里程:北京航空航天大学OpenHarmony技术俱乐部正式揭牌成立

12月11日,由OpenAtom OpenHarmony(以下简称“OpenHarmony”)项目群技术指导委员会(以下简称“TSC”)和北京航空航天大学共同举办的“OpenHarmony软件工程研讨会暨北京航空航天大学OpenHarmony技术俱乐部成立仪式”在京圆满落幕。 现场大合影 活动当天,多位重量级嘉宾出席了此次…

I2C总线通信(温湿度实验)

1.使能GPIOF时钟 2.将PF14设置为输出&#xff0c;PF15也可以先设置为输出 3.设置输出速度最高档位速度 4.SI7006的初始化 5.读取温度、湿度 6.将读取到的温度湿度数据通过计算公式进行转换 7.将结果输出 main.c #include "si7006.h"extern void printf(cons…

【python笔记】requests模块基础总结

前言 菜某笔记总结&#xff0c;如有错误请指正。&#xff08;抱歉可能我用渗透的靶场做的功能演示&#xff0c;让单纯想看爬虫整理的朋友不好理解&#xff0c;主要看一下requests库的写法吧&#xff0c;关于sql靶场&#xff0c;文件上传靶场什么的都当做网站的名字吧&#xff…

YashanDB携手深智城集团联合发布智慧城市解决方案

近日&#xff0c;在YashanDB 2023年度发布会上&#xff0c;深圳计算科学研究院携手深圳市智慧城市科技发展集团有限公司&#xff08;简称“深智城集团”&#xff09;重磅推出基于崖山数据库YashanDB的智慧城市解决方案&#xff0c;该联合解决方案高效支撑了深圳市CIM平台的建设…

020 OpenCV 轮廓、外接圆、外接矩形

一、环境 本文使用环境为&#xff1a; Windows10Python 3.9.17opencv-python 4.8.0.74 二、原理 2.1 函数接口 OpenCV中的findContours函数用于检测图像中的轮廓。轮廓是图像中连续的点集&#xff0c;它们通常表示物体的边缘或形状。在计算机视觉和图像处理中&#xff0c;…

PyCharm控制台堆栈乱码问题解决

目录 1、问题描述2、问题原因3、问题解决 1、问题描述 PyCharm环境都已经配置成了UTF-8编码&#xff0c;控制台打印中文也不会出现乱码&#xff0c;但报错堆栈信息中如果有中文会出现中文乱码&#xff1a; 这种该怎么解决呢&#xff1f; 2、问题原因 未将PyCharm编码环境与项目…

大数据机器学习与深度学习—— 生成对抗网络(GAN)

GAN概述 在讲GAN之前&#xff0c;先讲一个小趣事&#xff0c;你知道GAN是怎么被发明的吗&#xff1f;据Ian Goodfellow自己说&#xff1a; 之前他一直在研究生成模型&#xff0c;可能是一时兴起&#xff0c;有一天他在酒吧喝酒时&#xff0c;在酒吧里跟朋友讨论起生成模型。然…

Mapreduce小试牛刀(1)

1.与hdfs一样&#xff0c;mapreduce基于hadoop框架&#xff0c;所以我们首先要启动hadoop服务器 --------------------------------------------------------------------------------------------------------------------------------- 2.修改hadoop-env.sh位置JAVA_HOME配…

Android codec2 视频框架之编码输出内存管理

文章目录 pool的创建pool 中申请内存buffer 从service传递到clientC2buffer转换为MediaCodecBuffer编码 输出C2buffer的生命周期 buffer在框架中的流动流程&#xff0c;从buffer的申请、填充数据到binder中传递、转换为应用层数据、从应用层释放。 围绕以下的方面&#xff1a;…

(开源)2023工训大赛智能垃圾分类项目(可循环播放视频,显示垃圾分类信息,拍照识别,垃圾分类,满载报警,压缩)

省赛:由于这个比赛是两年一届&#xff0c;并未做足充分的准备&#xff0c;但是通过一定的单片机基础&#xff0c;加上速成能力&#xff0c;也就是熬夜学&#xff0c;通过疯狂的网络搜索&#xff0c;在省赛第5 入选国赛 下面来简单介绍一下我们作品&#xff1a; 主控&#xff1…

搜维尔科技:第九届元宇宙数字人设计大赛校园行讲演活动正式启动—中国戏曲学院站!

由全国高等院校计算机基础教育研究会指导&#xff0c;利亚德集团和爱迪斯通科技发起的数字人设计大赛正在火热进行中&#xff0c;同时进行的元宇宙数字人设计大赛校园行活动也正式拉开序幕&#xff0c;12月13日校园行活动—中国戏曲学院开讲。划重点&#xff1a;此次大赛已成为…

SSL证书过期怎么更新?

一、概述 SSL证书是用于加密网站和客户端之间通信的一种数字证书&#xff0c;可以确保数据传输的安全性和保密性。然而&#xff0c;SSL证书是有有效期的&#xff0c;一旦过期就需要及时更新。本文将介绍如何更新SSL证书&#xff0c;以确保网站的安全性和正常运行。 二、SSL证…

小程序开发实战案例四 | 小程序标题栏如何设置

上一期我们了解了 小程序底部导航栏 的实现效果&#xff0c;今天一起来了解下如何设置小程序标题栏&#xff5e; 基础标题栏 小程序标题栏主要包含返回、标题、收藏、菜单、收起 5 个模块&#xff0c;其中能够调整的部分只有标题和背景色。 另外 IDE上无法展示收藏按钮&#…

智慧路灯杆如何实现雪天道路安全监测

随着北方区域连续发生暴雪、寒潮、大风等气象变化&#xff0c;北方多地产生暴雪和低温雨雪冰冻灾害风险&#xff0c;冬季雨雪天气深度影响人们出行生活&#xff0c;也持续增加道路交通风险。 智慧路灯杆是现代城市不可或缺的智能基础设施&#xff0c;凭借搭载智慧照明、环境监测…

深入解析Freemarker模板引擎及其在Spring Boot中的高级整合

目录 引言1. Freemarker1.1.什么是Freemarker1.2 Freemarker模板组成部分1.3.优点 2. Spring Boot整合Freemarker2.1 配置2.2 数据类型 3. 案例总结 引言 Freemarker作为一款强大的模板引擎&#xff0c;与Spring Boot的整合能够极大地提升Web应用的开发效率和灵活性。本篇博客…

Ubuntu22.04_修改用户名_添加用户_修改电脑名

概要&#xff1a; 本篇所讲述的操作都是在图形化界面中进行。点击顶部栏右侧&#xff0c;展开系统菜单&#xff0c;打开设置 一、修改自己的用户名 1、修改之前查看信息 cat /etc/passwd 2、修改 输入完成&#xff0c;回车即可 3、修改之后查看信息 cat /etc/passwd 4、解…

一分钟解决:vscode卡在“设置SSH主机:VS Code-正在本地下载 VS Code 服务器”

问题&#xff1a;vscode之前可正常使用&#xff0c;更新之后&#xff0c;连接服务器卡住了。 解决&#xff1a;从CMD或者你的终端连接服务器&#xff0c;进入vscode-server目录下&#xff0c;删除一些文件夹就行&#xff0c;然后使用vscode重新链接&#xff0c;它会自动下载新…

Linux访问MySQL数据库(包含实验案例)

1、访问MySQL数据库。 1.1、登录到MySQL服务器 经过安装后的初始化过程&#xff0c;MySQL数据库的默认管理员用户名为"root"&#xff0c;密码为空。 [rootyang ~]# mysql -u root //"-u"选项用于指定认证用户有密码的情况下&#xff0c;使用"-p&qu…

用23种设计模式打造一个cocos creator的游戏框架----(十五)策略模式

1、模式标准 模式名称&#xff1a;策略模式 模式分类&#xff1a;行为型 模式意图&#xff1a;定义一系列的算法&#xff0c;把它们一个个封装起来&#xff0c;并且使它们可以相互替换。此模式使得算法可以独立于使用它们的客户而变化 结构图&#xff1a; 适用于&#xff1…

【期末复习向】常见的激活函数

激活函数是非线性的函数&#xff0c;使用它的原因就是因为线性函数无论叠加多少层&#xff0c;最终带来的变化都是线性的组合&#xff0c;一般也只能用于线性分类&#xff0c;如经典的多层感知机。但是如果加上非线性的变换&#xff0c;根据通用近似定理&#xff0c;就可使得神…