当前位置:   article > 正文

vue 获取input中光标位置,并且点击按钮在当前光标位置追加内容_vue中 入给输入光标赋值

vue中 入给输入光标赋值
  1. <template>
  2. <a-input
  3. id="myinput"
  4. type="textarea"
  5. v-model:value="demotext"
  6. :autosize="{ minRows: 9, maxRows: 9 }"
  7. @blur="tabFunc"
  8. ref="inputVal"
  9. ></a-input>
  10. <a-button @click="changetext('aa')">点击切换</a-button>
  11. </template>
  12. <script setup name="demo">
  13. import { ref, nextTick} from "vue";
  14. const demotext = ref('123456789');
  15. const insertInputTxt = (id, insertTxt) => {
  16. var elInput = document.getElementById(id);
  17. var startPos = elInput.selectionStart;
  18. var endPos = elInput.selectionEnd;
  19. if (startPos === undefined || endPos === undefined) return;
  20. var txt = elInput.value;
  21. var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos);
  22. elInput.value = result;
  23. // elInput.focus()
  24. // nextTick(() => {
  25. elInput.selectionStart = startPos + insertTxt.length;
  26. elInput.selectionEnd = startPos + insertTxt.length;
  27. demotext.value = elInput.value;
  28. console.log(demotext.value);
  29. // })
  30. };
  31. const changetext = () => {
  32. console.log(111);
  33. nextTick(() => {
  34. insertInputTxt("myinput", "a");
  35. })
  36. };
  37. </script>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/492652
推荐阅读
相关标签
  

闽ICP备14008679号