uniapp如何手动设置input/textare输入框焦点并将光标移到末尾

在uniapp中，如何通过代码手动设置input或textarea组件的焦点，并将光标定位到输入内容的末尾？尝试了this.$refs.input.focus()可以获取焦点，但光标总是停留在开头位置，希望实现类似微信聊天输入框的自动追尾效果。请问有什么解决方案或注意事项？H5和小程序平台是否都需要特殊处理？

2 回复

使用 this.$refs.inputRef.focus() 设置焦点，然后通过 this.$refs.inputRef.setSelectionRange(value.length, value.length) 将光标移到末尾。


在 UniApp 中，手动设置 input 或 textarea 输入框焦点并将光标移到末尾，可以通过以下步骤实现：

1. 使用 ref 引用组件

在模板中为 input 或 textarea 添加 ref 属性，例如：

<input ref="myInput" v-model="inputValue" />
<textarea ref="myTextarea" v-model="textareaValue"></textarea>

2. 调用 focus() 方法并设置光标位置

在方法中通过 $refs 获取组件实例，调用 focus() 方法聚焦，并使用 setSelectionRange 设置光标位置到末尾。

示例代码：

export default {
  data() {
    return {
      inputValue: '',
      textareaValue: ''
    };
  },
  methods: {
    // 设置 input 焦点并移动光标到末尾
    focusInput() {
      this.$nextTick(() => {
        const input = this.$refs.myInput;
        if (input) {
          input.focus();
          const length = input.value.length;
          input.setSelectionRange(length, length);
        }
      });
    },
    // 设置 textarea 焦点并移动光标到末尾
    focusTextarea() {
      this.$nextTick(() => {
        const textarea = this.$refs.myTextarea;
        if (textarea) {
          textarea.focus();
          const length = textarea.value.length;
          textarea.setSelectionRange(length, length);
        }
      });
    }
  }
};

注意事项：

  • 使用 this.$nextTick() 确保 DOM 更新完成后再操作。
  • setSelectionRange 适用于 input 和 textarea，但需确保组件已渲染。
  • 在部分平台（如小程序）中，focus 行为可能受平台限制，需测试兼容性。

通过以上方法即可实现手动聚焦并将光标定位到输入框末尾。

回到顶部