vue 字符串模板 textarea中插入文字标签

1.字符串模板以“[“开始以“]”结束是一个元素

2.按下backspace退格键或者delete删除键删除字符时，如果删的是字符串模板，会删除整个字符串模板元素

3.选择文字元素后，会选择整个的字符串模板

4.字符串模板得到焦点后会将焦点移动到字符串模板后


<template><div><el-form label-width="80px"><el-form-item label="内容"><el-inputref="smsInput"type="textarea":rows="4"v-model="smsContent"placeholder="请输入内容"@input.native="smsInput"@blur="inputBlur"@focus="focusHandler"@click.native="focusHandler"@keydown.up.down.left.right.native="focusHandler"@select.native="selectHandler"></el-input></el-form-item></el-form><el-popoverstyle="margin-left: 10px; float: right;"placement="right-start"width="200"v-model="visible"trigger="manual"><div class="insert-list"><p class="i-title">元素列表</p><div v-for="(item,index) in btns" :key="index">{{item}}<el-button @click="insertStr('['+item+']')" size="mini" type="primary">插入</el-button></div></div><el-buttonslot="reference"size="small"@click="visible = !visible"type="primary">插入元素</el-button></el-popover></div>
</template><script>
export default {data() {return {smsContent: "",inputFocus: null,visible: false,btns:['姓名','费用','日期','电话号码','发件人',]};},methods: {// 插入元素insertStr(str) {let before = this.smsContent.slice(0, this.inputFocus);let after = this.smsContent.slice(this.inputFocus,this.smsContent.length);this.inputFocus = this.inputFocus + str.length;this.smsContent = before + str + after;this.$emit("smsText", this.smsContent);},// 保存光标位置inputBlur(e) {this.inputFocus = e.target.selectionStart;this.visible = false;},// 删除元素剩余部分smsInput(e) {//deleteContentBackward==退格键 deleteContentForward==del键if (e.inputType == "deleteContentBackward" ||e.inputType == "deleteContentForward") {let beforeIndex = 0;let afterIndex = 0;// 光标位置往前        for (let i = e.target.selectionStart - 1; i >= 0; i--) {if (this.smsContent[i] == "[") {beforeIndex = i;afterIndex = e.target.selectionStart;break;}if (this.smsContent[i] == "]") {break;}}// 光标位置往后for (let i = e.target.selectionStart; i < this.smsContent.length; i++) {if (this.smsContent[i] == "]") {afterIndex = i+1;beforeIndex = e.target.selectionStart;break;}if (this.smsContent[i] == "[") {break;}}if(beforeIndex == 0 && afterIndex == 0){return}let beforeStr = this.smsContent.slice(0,beforeIndex)let afterStr = this.smsContent.slice(afterIndex)this.smsContent = beforeStr+afterStrthis.inputFocus = beforeStr.lengththis.$nextTick(() => {this.changeFocus(e.target, this.inputFocus, this.inputFocus);});}this.$emit("smsText", this.smsContent);},// 选择元素剩余部分selectHandler(e) {// 光标开始位置往前for (let i = e.target.selectionStart - 1; i >= 0; i--) {if (this.smsContent[i] == "[") {this.changeFocus(e.target, i, e.target.selectionEnd);break;}if (this.smsContent[i] == "]") {break;}}// 光标结束位置往后for (let i = e.target.selectionEnd; i < this.smsContent.length; i++) {if (this.smsContent[i] == "]") {this.changeFocus(e.target, e.target.selectionStart, i + 1);break;}if (this.smsContent[i] == "[") {break;}}},// 焦点跳出元素内focusHandler(e) {setTimeout(() => {let selStart = e.target.selectionStartlet beforeArrLength = this.smsContent.slice(0, selStart).split("[").length;let afterArrLength = this.smsContent.slice(0, selStart).split("]").length;//根据'['和']'生成两个数组 判断数组长度 是否相等 不相等就不成对就移动光标if (beforeArrLength != afterArrLength) {let pos = this.smsContent.indexOf("]", selStart) + 1if(beforeArrLength > afterArrLength && e.code == 'ArrowLeft'){//按下按键左箭头pos = this.smsContent.lastIndexOf("[",selStart)}this.changeFocus(e.target,pos,pos);}}, 100);},// 修改光标位置changeFocus(target, start, end) {let range,el = target;if (el.setSelectionRange) {el.setSelectionRange(start, end);} else {range = el.createTextRange();range.collapse(false);range.select();}},},
};
</script><style scoped>
.insert-list p {text-align: center;
}
.insert-list div {margin: 10px 0;display: flex;justify-content: space-between;
}
</style>

vue 字符串模板 textarea中插入文字标签相关推荐

在可编辑div中插入文字或图片的问题解决思路
最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片.因为web在线编辑器我从来只是用,基本不会去研究源代码.后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码. 基 ...
vue + iview Table表头中插入图片
vue + iview Table表头中插入图片开发中遇到一个问题,在表头中需要插入一个公式,不想再引入别的插件所以考虑用图片代替正常代码中这样引入图片前端可以正常显示: <img styl ...
SVG中插入HTML标签
在SVG中插入HTML标签需求背景: 设计想要在SVG绘图中做折行打点出省略号的功能,先前的代码需要在IE环境下运行,使用JS函数进行分割替换打点,然后还要手动定位,很是麻烦,不过当时的样式不是很复 ...
Word2003入门动画教程36：在Word文档中插入文字
Word 2003是微软公司提供的一款文字处理软件,可以对文字进行排版和编辑.分段等各种处理,最终将编辑好的内容打印出来,是办公室一族中必备的办公软件之一.这里Word联盟就为大家分享如何在Wor ...
html中如何添加php代码注释_html在源代码中插入注释标签!--...--
实例 HTML 注释: 这是一段普通的段落. 浏览器支持 IE Firefox Chrome Safari Opera 所有浏览器都支持注释标签. 定义和用法注释标签用于在源代码中插入注释.注释不会 ...
在div中插入文字和改变背景色
如下图,通过点击按钮,在div盒子中插入文字,并背景色 1.可以使用div中的innerText属性在div中插入文本内容,style.backgroudColor属性设置背景色. 2.完整 ...
python中气泡图文字标签_Excel中制作气泡图及为气泡图的系列数据点添加文本数据标签...
Excel中制作气泡图及为气泡图的系列数据点添加文本数据标签时间:2014-08-01 作者:snow 来源:互联网 Excel中的散点图可以显示两组数据之间的关系,而气泡图则可以显示三组数 ...
VBA word中插入文字和艺术字
1. 如何插入文字在当前光标处(活动文档末尾)插入文字 Sub InsertTextAtEndOfDocument()ActiveDocument.Content.InsertAfter Text: ...
textarea中插入标签_HTMLCSS学习笔记（二）-- HTML表单标签
表单 1 : 表单标签 <form></form> 属性 : action = '接口地址' method = 'get / post' name = '表单名称' 2 : 表 ...

vue 字符串模板 textarea中插入文字标签

vue 字符串模板 textarea中插入文字标签相关推荐

最新文章

热门文章