【vue/iview】将所选择的文本插入文本框的光标处

    changeExpression(value){console.log(value.name) //要插入的文本let elInput = document.getElementById('expression');let area = elInput.getElementsByClassName('ivu-input')[0] //获取输入框内容let start= area.selectionStart;let end = area.selectionEnd; //获取光标位置//拼接文本area.value = area.value.substr(0, start) + value.name + area.value.substr(start);this.formItem.expression = area.value; //赋值//重新赋值光标的位置this.$nextTick(() => {area.selectionStart = start+ value.name.length;area.selectionEnd = end + value.name.length;})},

原理：先拿到光标位置，在光标处切割拼接文本。最后一定要重新赋值光标位置，否则光标会移到文本的最后面而不是插入文本的后面。

【vue/iview】将所选择的文本插入文本框的光标处相关推荐

在文本框的光标处插入指定的文本（兼容IE6和Firefox）
昨天有人问我这个事,今天就来做做了,最开始是按自己的思路做,在keyup事件里对输入键做判断,以处理什么退格啊,删除啊,上下左右移动等动作,然后记录光标位置来做文本处理,费了好大劲.不过后来无意中发现 ...
html自定义实现文本编辑器,自定义开发富文本编辑器（Javascript实现点击插入内容到textarea光标处）...
富文本编辑器相信很多程序员都用过,但是如何自己制作一个仿富文本的编辑器来解决一些简单的或自定义的需求呢?下面给大家共享一个使用JavaScript实现在textarea光标处插入指定文本内容以及字符串 ...
vue、Cascader 级联选择、Cascader 属性事件方法、vue Cascader 所有级联选择样式、vue Cascader 级联选择全部属性事件方法
vue.Cascader 级联选择.Cascader 属性事件方法.vue Cascader 所有级联选择样式.vue Cascader 级联选择全部属性事件方法 Cascader 级联选择何时使用 ...
vue+iview 自定义实现穿梭框
vue+iview 自定义实现穿梭框因业务需求iview穿梭框不满足业务需求自己写了个穿梭框.因本人是后端,请各位大佬看到了也可帮忙优化下.只实现了基本功能表格及模态框代码 <Modal v ...
vue怎么实现点击复制html,Vue实现点击按钮复制文本内容的例子
Vue实现点击按钮复制文本内容的例子点击复制功能主要通过 clipboard.js 来实现在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话 ...
h5页面笔按下默认是拖动,H5中在拖动的元素或选择的文本进入到有效的放置目标时触发的事件ondragenter...
实例在拖动的元素进入到放置目标时执行 JavaScript : 定义和用法 ondragenter 事件在拖动的元素或选择的文本进入到有效的放置目标时触发. ondragenter 和 ondrag ...
单击时选择HTML文本输入中的所有文本
我有以下代码在HTML网页中显示文本框. <input type="text" id="userid" name="userid" v ...
jQuery取得select选择的文本与值
jquery获取select选择的文本与值获取select : 获取select 选中的 text : $("#ddlregtype").find("option: ...
php 获取下拉框选中的文本,jQuery如何获取select选择的文本与值？（代码示例）...
本篇文章给大家带来的内容是关于jQuery如何获取select选择的文本与值,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 获取select : 获取select 选中的 text ...
Vue+iview实现自定义格式导出Excel文件
背景:项目中要实现一个导出Excel文件模板的功能,原来实现是通过后台生成然后前端请求下载,这样要消耗IO资源,然后看了一下之前项目的导出功能,发现原来Vue+iview可以实现本地数据导出,不过iv ...

【vue/iview】将所选择的文本插入文本框的光标处

【vue/iview】将所选择的文本插入文本框的光标处相关推荐

最新文章

热门文章