vue 获取input光标位置,并实现插入模板语法。

点击上面的模板说明，可以在输入框的光标位置插入相应的语法。

<el-form-item label="模板说明：" v-if="form.news_type==='1'"><el-row class="templateCode"><el-col :span="8"><div class="grid-content bg-purple" style="color:#666" @click="makeActive('$Username$')"> 用户名：$Username$</div></el-col><el-col :span="8"><div class="grid-content bg-purple-light" @click="makeActive('$OrderId$')">订单号：$OrderId$</div></el-col><el-col :span="8"><div class="grid-content bg-purple" @click="makeActive('$Total$')">订单金额：$Total$</div></el-col></el-row><el-row><el-col :span="8"><div class="grid-content bg-purple" @click="makeActive('$Product_name$')">产品名称：$Product_name$</div></el-col></el-row></el-form-item><el-form-item label="编辑模板：" prop="message" v-if="form.news_type==='1'"><el-inputtype="textarea"id="emojiInput"maxlength="300"show-word-limit:autosize="{ minRows: 4, maxRows: 8}"v-model="form.message"placeholder="您好，您预约的**已经订购成功，我们将在1个工作日内与您联系安排服务，如有疑问请添加微信或致电1111"></el-input></el-form-item>

    /***插入模板说明的变量*/makeActive (item) {var elInput = document.getElementById('emojiInput') // 根据id选择器选中对象var startPos = elInput.selectionStart// input 第0个字符到选中的字符var endPos = elInput.selectionEnd// 选中的字符到最后的字符if (startPos === undefined || endPos === undefined) returnvar txt = elInput.value// 将表情添加到选中的光标位置var result = txt.substring(0, startPos) + item + txt.substring(endPos)elInput.value = result// 赋值给input的value// 重新定义光标位置elInput.focus()elInput.selectionStart = startPos + item.lengthelInput.selectionEnd = startPos + item.lengththis.form.message = result// 赋值给表单中的的字段},

vue 获取input光标位置,并实现插入模板语法。相关推荐

JS获取鼠标光标位置并在光标位置添加内容
目标需求获取鼠标光标位置,然后点击按钮或其他事件,在鼠标光标的位置插入需要的文字等准备工具 contenteditable:contenteditable属性指定元素内容是否可编辑. window ...
html input光标位置,js控制input框内光标位置（setSelectionRange详解）
问题描述前段时间碰到一个需求:在表单中有一个字段叫金额,用户希望点击该输入框后(focus),能够自动为其金额数字后加上"万元"两个字. 虽然这个需求可以通过其他的设计方式规避( ...
Vue获取当前的位置信息、经纬度
通过navigator.geolocation对象中的getCurrentPosition() 函数获取用户当前定位位置.这会异步地请求获取用户位置,并查询定位硬件来获取最新信息.当定位被确定后,定义 ...
vue获取input的属性_Vue中自动获取input焦点
1.给input属性添加autofocus属性,缺点autofocus 在移动版 Safari 上不工作 2.Vue官网给出的解决办法 // 注册一个全局自定义指令 `v-focus` Vue.dir ...
vue获取input的属性_vuejs 中如何优雅的获取 Input 值
原生 js 使用 getElementById 比较麻烦的地方需要为元素设置 id 设置 id 之后,无法复用,因为一个页面中不能存在两个相同的 id 双向绑定 v-model 分两种情况 inpu ...
input光标位置设置至行末端
最近接到了一个很尬的需求.. 这个需求是这样的- 再点击input框的时候光标要始终保持在内容的行末端 emm.. 废话少说,直接上代码! Js: end: function (item) {var ...
vue获取input焦点事件_vue获取input焦点，弹框后自动获取input焦点
Document 点开弹框1 点开弹框2 取消确定取消确定 var app = new Vue({ el: '#app', data() { return { id: 'ssssss', ...
uniapp vue获取dom元素位置和高度信息
我有一个标题,希望它的高度是动态变化的 <view :style="{height: height + 'px'}"><view id="title_i ...
JavaScript 中获取光标位置
1.概念和原理 DOM中并没有直接获取光标位置的方法,那么我们只能间接来获取光标位置.DOM支持获取光标选中的范围,我们可以以此为切入点,来获取或定位光标的位置,当选取范围起始点和结束点一样时,就是光 ...

vue 获取input光标位置,并实现插入模板语法。

vue 获取input光标位置,并实现插入模板语法。相关推荐

最新文章

热门文章