vue输入框实现鼠标光标后插入字符串
时间: 2023-04-01 21:03:07 浏览: 67
可以使用JavaScript中的selectionStart和selectionEnd属性来获取光标的位置,然后使用字符串的splice方法插入新的字符串。具体实现可以参考以下代码:
```
// 获取输入框元素
var input = document.getElementById('myInput');
// 获取光标位置
var startPos = input.selectionStart;
var endPos = input.selectionEnd;
// 获取输入框中的原始字符串
var originStr = input.value;
// 插入新的字符串
var newStr = '要插入的字符串';
var resultStr = originStr.slice(, startPos) + newStr + originStr.slice(endPos);
// 更新输入框的值
input.value = resultStr;
```
这样就可以在光标位置插入新的字符串了。
相关问题
vue输入框实现鼠标光标处插入字符串
可以使用JavaScript中的selectionStart和selectionEnd属性来获取光标位置,然后使用字符串的splice方法插入新的字符串。具体实现可以参考以下代码:
```
<template>
<div>
<input type="text" v-model="inputValue" @click="handleClick" ref="input" />
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
};
},
methods: {
handleClick() {
const input = this.$refs.input;
const startPos = input.selectionStart;
const endPos = input.selectionEnd;
const newStr = '插入的字符串';
this.inputValue = this.inputValue.slice(, startPos) + newStr + this.inputValue.slice(endPos);
input.selectionStart = startPos + newStr.length;
input.selectionEnd = startPos + newStr.length;
},
},
};
</script>
```
给我写一个vue输入框实现鼠标光标处插入字符串
好的,这是一个简单的 Vue 输入框实现鼠标光标处插入字符串的代码示例:
<template>
<div>
<input type="text" ref="input" v-model="text" @click="handleClick" />
</div>
</template>
<script>
export default {
data() {
return {
text: "",
};
},
methods: {
handleClick(event) {
const input = this.$refs.input;
const startPos = input.selectionStart;
const endPos = input.selectionEnd;
const insertText = "要插入的字符串";
this.text =
this.text.substring(, startPos) +
insertText +
this.text.substring(endPos, this.text.length);
input.selectionStart = startPos + insertText.length;
input.selectionEnd = startPos + insertText.length;
input.focus();
},
},
};
</script>