uniapp input框如何获取输入光标

在uniapp开发中，如何获取input输入框的光标位置？我需要在用户输入时实时监测光标的位置，但找不到相关API或方法。请问有实现方案吗？最好能兼容H5和小程序端。

2 回复

在uniapp中，可以使用focus()方法获取输入框光标。例如：

this.$refs.myInput.focus()

需要给input设置ref属性：

<input ref="myInput" />

或者用uniapp的uni.createSelectorQuery()获取节点后调用focus方法。


在 UniApp 中，可以通过以下方法获取输入框（input）的光标焦点：

方法一：使用 focus 属性

在 input 组件上设置 focus 属性为 true，页面加载时自动聚焦光标。

示例代码：

<template>
  <view>
    <input focus placeholder="自动获取焦点" />
  </view>
</template>

方法二：通过 ref 和组件方法

使用 ref 获取 input 组件实例，并调用 focus() 方法。

示例代码：

<template>
  <view>
    <input ref="myInput" placeholder="点击按钮获取焦点" />
    <button @tap="handleFocus">聚焦输入框</button>
  </view>
</template>

<script>
export default {
  methods: {
    handleFocus() {
      this.$refs.myInput.focus(); // 调用 focus 方法
    }
  }
}
</script>

注意事项：

  1. 平台差异：在部分安卓设备上，可能需要短暂延时（如 setTimeout）确保组件渲染完成。
  2. 条件渲染：若 input 通过 v-if 动态显示，建议在 $nextTick 中调用 focus()。

延时示例：

handleFocus() {
  setTimeout(() => {
    this.$refs.myInput.focus();
  }, 50);
}

以上方法适用于 UniApp 的 Vue 语法，兼容微信小程序等平台。

回到顶部