vue 获取input中光标位置，并且点击按钮在当前光标位置追加内容

最新推荐文章于 2024-03-28 18:25:45 发布

原创最新推荐文章于 2024-03-28 18:25:45 发布 · 1.8k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

dream0129

关注

标签

#javascript #前端 #vue.js

分类前端开发

文章介绍了如何在Vue.js中使用`v-model`和DOM操作实现一个文本输入框，当点击按钮时，能在当前光标位置插入指定字符并保持光标位置。

<template>
 
  <a-input
    id="myinput"
    type="textarea"
    v-model:value="demotext"
    :autosize="{ minRows: 9, maxRows: 9 }"
    @blur="tabFunc"
    ref="inputVal"
  ></a-input>
  <a-button @click="changetext('aa')">点击切换</a-button>
</template>

<script setup name="demo">
import { ref, nextTick} from "vue";
const demotext = ref('123456789');
const insertInputTxt = (id, insertTxt) => {
  var elInput = document.getElementById(id);
  var startPos = elInput.selectionStart;
  var endPos = elInput.selectionEnd;
  if (startPos === undefined || endPos === undefined) return;
  var txt = elInput.value;
  var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos);
  elInput.value = result;
  // elInput.focus()
  // nextTick(() => {
    elInput.selectionStart = startPos + insertTxt.length;
    elInput.selectionEnd = startPos + insertTxt.length;
    demotext.value = elInput.value;
    console.log(demotext.value);
  // })
  
  
};
const changetext = () => {
  console.log(111);
  nextTick(() => {
    insertInputTxt("myinput", "a");
  })
  
};
</script>