textarea在光标处插入一段文本

最新推荐文章于 2024-04-18 11:15:48 发布

独鹿DT

最新推荐文章于 2024-04-18 11:15:48 发布

阅读量1.4k

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_47529373/article/details/115391769

版权

textarea在光标处插入一段文本

效果

在这里插入图片描述

实现

HTML:

<!-- 点击字体图标在textarea中加入文本 --> 
<span @click="addPictureClic">
	<i class="fa fa-image" title="添加图片"

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

独鹿DT

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue：使用v-model绑定的textarea在光标处插入指定文本

q1003675852的博客

09-14

853

本文主要记录Vue页面使用v-model绑定的textarea如何在光标处插入指定文本。

Textarea在光标停留处插入文字

05-28

NULL 博文链接：https://cai555.iteye.com/blog/618161

参与评论您还未登录，请先登录后发表或查看评论

textarea 在光标处插入文字

u011927449的博客

06-09

888

效果演示欢迎访问cssfirefly.cnblogs.com html： <textarea id="text" style="width:500px;height:80px;">欢迎访问http://cssfirefly.cnblogs.com/</textarea> <input type="button" value="插入文字" onclick="insertText(document.getElementById('text'),' NewWor...

对TextArea光标位置插入文本

weixin_46383294的博客

02-08

1467

场景：输入框输入时点击插入文本的按钮，在光标位置插入文本处理输入框的值 const setText = (str: string) => { const insertTxt = `#${str}#`; // 多个输入框可以用变量记录获取焦点的元素，此处为focus const elInput: any = document.getElementById(focus); // 获取光标所在位置前后字符串的索引 const startPos = elInput

在textarea光标处插入内容

字串8的专栏

11-23

3695

function test(str){ var tc = document.getElementById("mytextarea"); var tclen = tc.value.length; tc.focus(); if(typeof document.selection != "undefined") { document

textarea的光标位置处插入文字

chenxiaoyi0207的博客

06-01

1554

textarea的光标位置处插入文字

jQuery往textarea中光标所在位置插入文本的方法

10-24

本文主要介绍如何使用jQuery在textarea元素中光标所在位置插入文本的技术，涉及到的操作和概念包括jQuery库的使用、文本框（textarea）的光标定位与操作、JavaScript中的字符串操作等。文章首先定义了jQuery的扩展...

在textarea光标处插入文本

11-14

### 在Textarea光标处插入文本 #### 知识点概览本文将详细介绍如何使用JavaScript在`textarea`的光标位置插入文本。该方法适用于多种浏览器环境，包括Internet Explorer（IE）和其他基于Mozilla的浏览器（如Fire...

JS在textarea光标处插入文本的小例子

12-12

height:180px">柯乐义 Javascript 在textarea光标处插入文本</textarea> (document.getElementById('keleyi_com'),'www.keleyi.com')" value="插入文本" /> ``` 在这段代码中，主要关注`insertAtCursor`函数...

TextArea在光标处插入内容（话题）

黑猴子1357751126@qq.com

06-19

737

在文本域中插入内容，插入话题

textarea中的光标停留处插上文字

04-05

目的通过点击页面上的按钮button 在textarea中的光标停留处插上文字

前端在textarea文本域中光标插入指定内容

qq_45094682的博客

04-07

1317

前端在textarea文本域中光标插入内容，直接看图说话！ <div class="DetailsCom_main_text boxEditSms" style="position: relative;"> <p class="p_name">模板内容</p> <div class="rig_ipt" > <textarea name="templateMain" class="message_area" placeholder="请输入模

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

cybersnow精通 28 门计算机语言，凭借其超凡的技术能力，成功开发过上万个应用，广泛涉及政府、商业、个人等众多领域，甚至在检察院、环保局、公安局等专业场景中也大放异彩。不仅熟练掌握单片机和物联网开发，在软件架构设计方面更是独树一帜，自创了跨平台软件

12-13

673

在前端研发中我们经常需要使用脚本在文本框中插入内容。如果产品要求不能直接插入开始或者尾部，而是要插入到光标位置，此时我们就需要获取光标/光标选中的位置。这两个属性分别对应选中区域的开始位置和结束位置，当没有选中任何内容的时候，两个值相等并且值为光标位置。很多时候，我在格式化文本处需要选择选项，将选择的信息输入到光标位置。

vue-textarea光标位置插入指定元素

tangyb828的博客

04-18

1990

<el-form-item label="模板内容:" prop="templateContext">width:100%;"/>--添加变量下拉菜单-->">" class="el-icon-circle-plus-outline cursor_pointer">添加变量</i>

利用selection对象在textarea光标处插入指定文本

weiyangxiaoping的博客

05-14

3191

最近项目中需要做一个效果：在文本框中光标处输入指定的文本。这里就需要用到selection对象。网上查了资料，看了mdn，发现知识点有点乱，这边先写下我这次用到的几个兼容性 <= IE10: document.selection,返回的是当前文档选中的内容，目前这个api只有ie10以下支持，相关的属性和方法如下 > IE11 and Others: window.getSelect

在input、textarea光标处添加字符串（selection、range）

黄彪博客

02-15

3354

文章目录一、参考二、问题描述三、快速入门四、内置对象介绍HTMLInputElement介绍Selection介绍Range五、代码集合在文本控件的光标位置添加字符串一、参考 setSelectionRange()参考 Selection MDN Range MDN 二、问题描述业务需求：摄像头发现有违章停车，就需要短信通知到相关车主开发任务：需要提前编辑好相关短信模板，比如时间、车牌号、车主名字等通用模板信息，需要使用特定字符代替，方便后台解析。而这些字符串是开发定的，对编写短

java 文本域光标在头部_如何在input、textarea中光标处插入指定内容

weixin_39620118的博客

03-07

146

RT，或许你们脑子里首先想到的是使用富文本编辑器，那么恭喜你，想法是对的。But，很多富文本编辑器并没有提供很多的api，这里推荐使用百度Ueditor，它提供了很好的api以及文档，但是话又说回来，如果使用这个，有点大材小用了。那么，说回正题，如题，如何使用简单的代码实现这一需求呢，话不多说，老规矩，直接上代码：//html代码：插入//js代码：$('#textarea').on('selec...

Vue获取textarea光标插入内容

man_nam_man的博客

07-01

2451

<div style="background-color: #efefef; width:100%;height: 300px;"> <textarea ref="contentArea" v-model="contentFormula" style="width: 100%;height: 100%"> {{contentFormula}} </textarea> </div> const myField = this.$refs.

vue3 textarea光标插入

最新发布

01-22

### Vue3 中实现 Textarea 光标位置插入文本为了实现在 `textarea` 的光标位置插入特定文本，在 Vue3 中可以通过监听用户的交互事件并获取光标的当前位置来完成这一功能。具体来说，通过 JavaScript 原生的方法可以取得和设置光标的位置。对于 `textarea` 控件而言，JavaScript 提供了访问其选区（即光标所在位置）的能力。这允许开发者读取或修改用户正在编辑的内容中的选定部分。当涉及到在光标处插入新内容时，主要依赖于两个属性：`selectionStart` 和 `selectionEnd`。这两个属性分别表示选择区域的起始点和结束点；如果没有任何文字被选中，则两者相等，代表的就是当前光标的确切位置[^2]。基于此逻辑，可以在 Vue 组件内定义一个方法用于处理文本插入操作： ```javascript methods: { insertTextAtCursor(text) { const textarea = this.$refs.editorbox; let start = textarea.selectionStart, end = textarea.selectionEnd; // 保存原始滚动条位置 let scrollTop = textarea.scrollTop; // 更新 value 属性前先移除 v-model 自动同步机制 this.content = this.content.substring(0, start) + text + this.content.substring(end); // 手动触发 input 事件使 v-model 同步更新视图状态 this.$nextTick(() => { $event.target.dispatchEvent(new Event('input', { bubbles: true })); // 移动光标到新增加的文字之后 setTimeout(() => { textarea.setSelectionRange(start + text.length, start + text.length); // 恢复之前的滚动条位置 textarea.scrollTop = scrollTop; }, 0); }); } } ``` 这段代码实现了如下几个关键步骤： - 记录下光标前后的内容片段； - 构建新的字符串序列并将之赋给 `this.content` 变量； - 使用 `$nextTick()` 确保 DOM 已经反映最新的数据变化后再调整光标位置； - 设置一个新的输入事件以通知框架重新渲染界面，并最终将光标定位至所插入文本之后[^3]。