vue中的input框，在光标的位置插入元素

最新推荐文章于 2024-07-03 11:08:48 发布
最新推荐文章于 2024-07-03 11:08:48 发布
阅读量1k 收藏 9
点赞数 4
CC 4.0 BY-SA版权
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bigelonglong/article/details/136373068
该篇文章介绍了如何在基于Vue.js的文本编辑组件中，实现在textarea中插入自定义标签并保持光标位置的方法，涉及DOM操作和事件处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  // textarea的字段添加到
    fieldinsert(row) {  //插入的方法，row是插入的元素
      let dom = this.$refs.textareaI.$refs.textarea;  //textareaI是设置在input的ref
      // console.dir(dom);
      let index = dom.selectionStart;
      let contont = dom.value;
      this.textarea =
        contont.substring(0, index) +
        `{${row.label}}` +
        contont.substring(index, contont.length);
      this.$nextTick(() => {  //必须在DOM更新之后操作
        dom.focus();
        dom.setSelectionRange(   // 光标位置
          index + row.label.length,
          index + row.label.length
        );
      });
    },

Bigelonglong
关注
vue 获取input光标位置,并实现插入模板语法。
吴小花的博客
04-30 4879
点击上面的模板说明，可以在输入框的光标位置插入相应的语法。 <el-form-item label="模板说明：" v-if="form.news_type==='1'"> <el-row class="templateCode"> <el-col :span="8"> <di...
Vue：使用v-model绑定的textarea在光标处插入指定文本
q1003675852的博客
09-14 877
本文主要记录Vue页面使用v-model绑定的textarea如何在光标处插入指定文本。
vue项目中在可编辑div光标位置插入内容的实现代码
10-15
主要介绍了vue项目中在可编辑div光标位置插入内容的实现代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue 获取input中光标位置，并且点击按钮在当前光标位置追加内容
dream0129的博客
02-19 1762
【代码】vue 获取input中光标位置，并且点击按钮在当前光标位置追加内容。
vue3 在el-input的光标处插入文本
reembarkation的博客
07-03 1173
vue3 在el-input的光标处插入文本
vue-textarea光标位置插入指定元素
tangyb828的博客
04-18 2026
<el-form-item label="模板内容:" prop="templateContext">width:100%;"/>--添加变量下拉菜单-->">" class="el-icon-circle-plus-outline cursor_pointer">添加变量</i>
vue在光标处加入内容
qq_38143787的博客
11-10 1245
vue如何在光标处插入文字
vue获取textarea的光标位置.js
08-13
vue通过当前的光标来进行插值，从而需要去获取光标所在的位置然后进行对光标前后的字符串进行截取处理，从而达到对新字符的插入
Vue中div contenteditable 的光标定位方法
10-18
总结而言，通过使用上述方法，我们可以在Vue中有效地控制div[contenteditable=true]元素的光标位置，从而提升用户的编辑体验。这个方法特别适合于需要动态更新内容的富文本编辑器组件。希望上述内容对使用Vue开发...
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
10-27
在处理`<textarea>`光标位置插入文字并移动光标到文字末尾的操作时，主要涉及两个关键属性：`selectionStart`和`selectionEnd`，以及在IE中使用的`document.selection`对象。 `selectionStart`和`selectionEnd`是...
vue在光标的位置插入内容
cuifangfang1177的专栏
12-02 2366
一，在textarea中加入id 1 2 3 4 5 6 7 8 9 <el-form-item :label="$t('message_template_content')"prop="content"> <el-input type="textarea" id="textarea" ...
数组任意位置插入元素,删除特定元素的实例
12-18
如下所示： $ary = array( array(&#39;t&#39;=>1,&#39;y&#39;=>2), array(&#39;t&#39;=>2,&#39;y&#39;=>9) ); $t = array_splice( $ary, 1,0,array(array(&#39;t&#39;=>3,&#39;y&#39;=>10)) ); print_r($ary); 控制台输出： $ary = array( array(&#39;t&#39;=>1,&#39;y&#39;=>2), array(&#39;t&#39;=>3,&#39;y&#39;=>10), array(&#39;t&#39;=>2,&#39;y&#39;=>9) ); 简单介绍一下array_splice方法，参数一就是被操作的数组，参数二是操作元素的索引值，参数三是长度
输入框光标位置插入文本的实现与应用
咱们不气的博客
03-28 450
当用户点击“插入文本”按钮时，指定的文本将被插入到的当前光标位置。通过这种方式，用户可以在已有内容中插入新文本，而无需手动移动光标位置或复制粘贴文本。
vue在鼠标光标指定位置插入文字
qq_45838276的博客
04-09 699
1、html2、js} else {
VUE 输入框实现光标插入，设置光标位置并删除光标内容
m0_62333895的博客
11-02 6167
js光标操作。
input/textarea光标位置插入文字
wjsn520的博客
02-26 886
【代码】input/textarea光标位置插入文字。
vue 如何获取input中光标位置，并且点击按钮在当前光标后追加指定内容
WenyueQ@
12-05 2117
el-button plain type="primary" size="mini" @click="insertContentHandle(“我是插入的内容”)">向光标位置插入内容</el-button>console.log(e.srcElement.selectionStart) //光标所在的位置。blurIndex: null,//记录光标位置。// 获取光标所在位置的index。// 插入内容的方法。
vue3，光标所在位置插入字符，没有选中光标的话默认在输入框最前面添加字符...
weixin_42588555的博客
01-10 825
要在光标所在位置插入字符，可以使用 Vue 3 中的 refs 和 $refs 属性。首先，你需要在组件中添加一个 ref 属性，然后在模板中使用该 ref 属性来绑定到输入框元素上。 例如： <template> <input ref="input" /> </template> <script> export default { met...
input、textarea 输入框------光标操作、指定光标位置插入内容
yiyueqinghui的博客
11-17 5238
1、光标处插入指定内容 /* * obj: input/textarea输入框的dom对象 * str: 光标处要插入的内容 */ function insertText(obj,str) { if (document.selection) { var sel = document.selection.createRange(); sel.text = str; } else if (typeof obj.selectionStart === 'number'
vue2中input光标定位插入内容
最新发布
04-01
### Vue2 中实现 Input 框光标定位并插入文本的方法 在 Vue2 项目中，可以通过 DOM API 和事件监听器来实现 `input` 框内的光标定位以及插入特定文本的功能。以下是具体实现方式： #### 核心逻辑 通过 JavaScript 的原生 DOM 方法 `setSelectionRange(start, end)` 来控制光标的起始和结束位置[^1]。此方法适用于 `<input>` 和 `<textarea>` 元素。 对于插入内容的操作，则需要获取当前光标的位置，并将新内容拼接到原有字符串中的对应索引处[^2]。 --- #### 实现代码示例 以下是一个完整的 Vue2 组件示例，展示如何动态插入文本到指定光标位置： ```vue <template> <div> <input type="text" ref="inputRef" @focus="handleFocus" @input="updateValue" v-model="value" /> <button @click="insertText">插入文本</button> </div> </template> <script> export default { data() { return { value: "", // 双向绑定的输入框值 cursorPosition: null, // 记录光标当前位置 }; }, methods: { handleFocus(event) { this.cursorPosition = event.target.selectionStart; // 获取光标初始位置 }, updateValue(event) { const { selectionStart } = event.target; this.cursorPosition = selectionStart; // 更新光标位置 }, insertText() { const inputValue = this.value || ""; // 当前输入框的值 const textToInsert = "Hello"; // 要插入的文本 let beforeCursor = inputValue.substring(0, this.cursorPosition); // 光标之前的部分 let afterCursor = inputValue.substring(this.cursorPosition); // 光标之后的部分 // 合并新的字符串 this.value = beforeCursor + textToInsert + afterCursor; // 设置光标的新位置 this.$nextTick(() => { const newCursorPosition = this.cursorPosition + textToInsert.length; this.setCaretPosition(newCursorPosition); }); }, setCaretPosition(position) { const inputElement = this.$refs.inputRef; if (inputElement.setSelectionRange) { inputElement.focus(); inputElement.setSelectionRange(position, position); // 定位光标 } }, }, }; </script> ``` --- #### 关键点解析 1. **记录光标位置** 使用 `selectionStart` 属性获取光标所在位置，并将其存储以便后续操作。 2. **分割原始字符串** 将输入框的内容按照光标位置分为两部分：光标之前的子串 (`beforeCursor`) 和光标之后的子串 (`afterCursor`)。 3. **更新输入框内容** 新内容被插入到两个子串之间形成最终结果，并重新赋值给输入框模型属性 `v-model`。 4. **重置光标位置** 利用 `$nextTick()` 确保视图更新完成后调用 `setSelectionRange()` 方法调整光标至正确位置[^3]。 --- #### 注意事项 - 如果目标浏览器不支持某些现代特性（如 Firefox 对拖拽行为的影响），需额外处理兼容性问题。 - 需要确保每次修改数据后及时刷新界面状态以同步视觉效果与实际逻辑。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值