获取光标位置,点击按钮插入文本标签
实现功能:文本框上方有一些标签按钮,点击标签按钮将对应的文本标签插入到文本框中,要求插入位置为鼠标点击位置。
vue部分
// An highlighted block
<el-form-item>
<el-input type="textarea"
v-model="addForm.content"
:rows="4"
@blur="handleInputBlur"
ref="inputArea"
></el-input>
</el-form-item>
<el-form-item>
<el-button
v-for="item in dicts['lable']"
@click="labClick(item.lableName)"
>{{item.lableName}}</el-button>
</el-form-item>
js部分
// An highlighted block
<script>
export default {
data () {
return {
cursorIndex:''
}
},
methods:{
//获取光标位置
handleInputBlur (e) {
this.cursorIndex = e.srcElement.selectionStart
},
//点击标签按钮,处理文本框文本内容
labClick(lab){
let s1='',
let s2='',
if(this.addForm.content.length<this.cursorIndex){
this.addForm.content=this,addForm.content+lab;
}
else{
s1=this.addForm.content.toString();
s2=this,addForm.content.toString();
this.addForm.content=s1.toString(0,this.cursorIndex)+
'['+
lab+
']'+
s2.substring(this.cursorIndex,this.addForm.content.length);
}
this.$refs.inputArea.forcus()
}
}
}
</script>