vant4 van-field获取光标位置插入文字

最新推荐文章于 2024-05-20 10:06:54 发布

landeying

最新推荐文章于 2024-05-20 10:06:54 发布

阅读量273

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43837473/article/details/134602325

版权

<template>
  <van-field
    v-model="inputValue"
    ref="inputRef"
  />
  <van-button @click="insertText">插入文字</van-button>
</template>

<script>
export default {
  data() {
    return {
      inputValue: 'Hello, World!',
    };
  },
  methods: {
    insertText() {
      const input = this.$refs.inputRef.$el.querySelector('input');
      if (input) {
        const startPos = input.selectionStart;
        const endPos = input.selectionEnd;
        const textToInsert = '插入的文字';
        this.inputValue = this.inputValue.substring(0, startPos) + textToInsert + this.inputValue.substring(endPos, this.inputValue.length);
        input.setSelectionRange(startPos + textToInsert.length, startPos + textToInsert.length);
      }
    }
  }
};
</script>