Vue input textarea输入框通过光标位置插入想要的值
先看一下问题textarea的代码<Inputref="variableText" id="test"@blur.native.capture="" v-model="formData.smsContent"type="textarea":autosize="{minRows: 10}"/>动态button,可以传输不同的值:<Buttonsize="large" style="
·
先看一下问题
textarea的代码
<Input ref="variableText" id="test" @blur.native.capture="" v-model="formData.smsContent" type="textarea" :autosize="{minRows: 10}" />
动态button,可以传输不同的值:
<Button size="large" style="color: #0A7AD1" long="true" @click="getPositionForTextAreaTest(but)" v-for="but in buts">{{but}}</Button>
获取光标函数:
function getPositionForTextArea(ctrl){
let CaretPos = 0;
if(ctrl.selectionStart || ctrl.selectionStart == '0'){// Firefox support
CaretPos = ctrl.selectionStart;
}
// console.log(CaretPos);
return CaretPos;
}
export {
getPositionForTextArea
}
注意,在vue里面的input和html原生的的获取方式是不一样
<Input ref="variableText" id="test" @blur.native.capture="" v-model="formData.smsContent" type="textarea" :autosize="{minRows: 10}" />
这个是vue的Button其获取方式是:
getPositionForTextAreaTest(a){
debugger;
let position = document.getElementById("test").getElementsByTagName("textarea")[0];
let pos = getPositionForTextArea(position);
console.log(pos);
let y = position.value;
console.log(y)
this.frontString = y.substring(0,pos);
this.afterString = y.substring(pos,this.formData.smsContent.length);
console.log(this.frontString);
console.log(this.afterString);
// this.formData.smsContent = '';
this.formData.smsContent = this.frontString+a+this.afterString;
console.log(y)
},
对于原生的html的button和input的使用
其获取规则
getPositionForTextAreaTest(a){
debugger;
let position = document.getElementById("testInput");
let pos = getPositionForTextArea(position);
console.log(pos);
let y = position.value;
console.log(y)
this.frontString = y.substring(0,pos);
this.afterString = y.substring(pos,this.formData.smsContent.length);
console.log(this.frontString);
console.log(this.afterString);
// this.formData.smsContent = '';
this.formData.smsContent = this.frontString+a+this.afterString;
console.log(y)
},
对于前端从textarea获取光标位置,可以参考:https://m.jb51.net/article/25839.htm
更多推荐
已为社区贡献2条内容
所有评论(0)