vue3，光标所在位置插入一串字符，没有选中光标的话默认在输入框最前面添加一串字符...

你可以使用 Selection API 来获取光标位置并插入字符。以下是一个示例代码：

// 获取输入框元素
const input = document.getElementById('input')

// 获取光标位置
const startPos = input.selectionStart
const endPos = input.selectionEnd

// 插入的字符串
const newStr = '要插入的字符串'

// 将新字符串插入到光标位置
input.value = input.value.substring(0, startPos) + newStr + input.value.substring(endPos, input.value.length)

// 将光标移动到插入字符串的末尾
const newEndPos = startPos + newStr.length
input.setSelectionRange(newEndPos, newEndPos)

这段代码会将字符串 `newStr` 插入到输入框 `input` 的光标位置。如果没有选中任何文本，则会将字符串插入到输入框的最前面。最后将光标移动到插入字符串的末尾，以便用户继续输入。

相关问题

vue3，光标所在位置插入一串字符，没有选中光标的话默认在输入框最前面添加一串字符

### 回答1：
在 Vue 3 中，你可以使用 ref 获取到输入框的 DOM 元素，然后使用 DOM 操作来插入字符。下面是一个例子：

<template>
  <input ref="input" />
</template>

<script>
export default {
  methods: {
    insertString(str) {
      // 获取输入框 DOM 元素
      const input = this.$refs.input
      // 获取光标位置
      const start = input.selectionStart
      const end = input.selectionEnd
      // 在光标位置插入字符
      input.value = input.value.slice(0, start) + str + input.value.slice(end)
      // 设置光标位置
      input.selectionStart = input.selectionEnd = start + str.length
      // 触发输入事件
      input.dispatchEvent(new Event('input'))
    }
  }
}
</script>

然后你就可以在组件内部或外部调用这个方法，传入你想要插入的字符串即可。

如果你想在输入框最前面添加一串字符，可以使用类似的方法，将光标位置设置为 0 即可。

### 回答2：
在Vue3中，我们可以通过操作DOM元素来实现光标所在位置插入一串字符的功能。首先，我们需要获取到输入框的DOM元素。可以使用`ref`进行引用。

<template>
  <input ref="myInput" type="text" />
  <button @click="insertText">插入字符</button>
</template>

在组件的`methods`中，使用`insertText`函数来插入字符。首先获取输入框的DOM元素，然后使用`selectionStart`属性获取光标所在位置的索引。如果没有选中光标，则索引为0，即光标位于输入框的最前面。然后，使用`splice`函数在字符串的相应位置插入一串字符，并重新设置输入框的值。

export default {
  methods: {
    insertText() {
      const myInput = this.$refs.myInput;
      const startPos = myInput.selectionStart || 0;
      const textToInsert = "一串字符";
      const currentValue = myInput.value;

      const newValue = currentValue.slice(0, startPos) + textToInsert + currentValue.slice(startPos);
      myInput.value = newValue;
    }
  }
}

最后，通过点击按钮触发`insertText`函数，就可以在光标所在位置插入一串字符了。如果没有选中光标，插入的字符将默认位于输入框的最前面。

### 回答3：
在Vue3中，可以使用以下方法在光标所在位置插入一串字符，如果没有选中光标，则默认在输入框最前面添加一串字符。

首先需要在组件中设置一个数据双向绑定的变量，例如inputText。

然后，在绑定的输入框中加入一个`ref`属性，并将其指向一个名为"inputRef"的引用对象。

接着，在组件中声明一个方法，例如insertText，用于实现在光标位置插入一串字符。方法接收一个参数text，表示要插入的字符串。

在该方法中，首先通过`this.$refs.inputRef`来获取到输入框的DOM元素，然后获取光标位置，可以使用`selectionStart`属性。如果光标没有选中任何内容，则将光标位置设置为0，即输入框最前面。

最后，使用字符串的`substring`方法将插入的字符text分别插入到光标前、光标后的文本中，再重新设置到输入框的值上。

代码示例如下：

<template>
  <div>
    <input v-model="inputText" ref="inputRef">
    <button @click="insertText('插入的字符串')">插入</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    };
  },
  methods: {
    insertText(text) {
      const inputElem = this.$refs.inputRef;
      const cursorPos = inputElem.selectionStart || 0;
      
      const textBeforeCursor = this.inputText.substring(0, cursorPos);
      const textAfterCursor = this.inputText.substring(cursorPos);
      
      this.inputText = textBeforeCursor + text + textAfterCursor;
      
      // 更新光标位置，可选
      inputElem.selectionStart = cursorPos + text.length;
      inputElem.selectionEnd = cursorPos + text.length;
      inputElem.focus();
    }
  }
};
</script>

这样就实现了在Vue3中，在光标所在位置插入一串字符，如果没有选中光标，则默认在输入框最前面添加一串字符。

vue3，光标所在位置插入字符，没有选中光标的话默认在输入框最前面添加字符...

你可以使用原生的 JavaScript 方法 `selectionStart` 和 `selectionEnd` 来获取光标的位置。然后在字符串中插入字符时，可以使用字符串的 `slice` 方法将字符串分为光标前的部分和光标后的部分，再将要插入的字符插入到中间，最后将两个部分拼接起来即可。

以下是一个简单的示例代码：

<template>
  <div>
    <input type="text" ref="input" @input="onInput" />
  </div>
</template>

<script>
export default {
  methods: {
    onInput(e) {
      const input = this.$refs.input
      const start = input.selectionStart
      const end = input.selectionEnd
      const value = input.value
      const insertValue = 'x'

      const newValue = value.slice(0, start) + insertValue + value.slice(end)
      input.value = newValue

      // 重置光标位置
      input.selectionStart = input.selectionEnd = start + insertValue.length
    },
  },
}
</script>

在上面的示例中，`onInput` 方法中首先获取了光标的位置，然后将要插入的字符插入到输入框的值中，最后重置光标位置。需要注意的是，在重置光标位置时，需要将光标位置设置为插入字符后的位置，即 `start + insertValue.length`。