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

最新推荐文章于 2024-07-17 14:47:00 发布

dream0129

最新推荐文章于 2024-07-17 14:47:00 发布

阅读量1k

点赞数 5

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/dream0129/article/details/136176691

版权

<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>