uni-app如何打开页面自动焦点输入框并弹出软键盘

在uni-app中，如果你希望在打开页面时自动聚焦到某个输入框并弹出软键盘，可以通过页面生命周期函数和DOM操作来实现。以下是一个完整的示例代码，展示了如何实现这一功能。

示例代码

1. 创建页面文件（如 pages/index/index.vue）：

<template>
  <view>
    <input 
      type="text" 
      ref="myInput" 
      placeholder="请输入内容" 
      v-model="inputValue"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  onReady() {
    this.focusInput();
  },
  methods: {
    focusInput() {
      // 使用uni.createSelectorQuery来获取DOM节点
      uni.createSelectorQuery().select('#myInput').boundingClientRect(rect => {
        rect.id      // 节点的ID
        rect.dataset // 节点的dataset
        // 调用 focus 方法使输入框获得焦点
        const inputContext = uni.createSelectorQuery().in(this).select('#myInput');
        inputContext.fields({ node: true, size: true }).exec((res) => {
          if (res[0] && res[0].node) {
            res[0].node.focus({ focus: true });
          }
        });
      }).exec();
    }
  }
};
</script>

<style>
/* 样式可以根据需要调整 */
</style>

1. 注意事项：
   • 在模板中，input 标签的 ref 属性设置为 myInput，以便后续通过 uni.createSelectorQuery 获取该DOM节点。
   • 在 onReady 生命周期函数中调用 focusInput 方法，确保页面DOM已加载完毕。
   • 使用 uni.createSelectorQuery 来选择节点，并通过 boundingClientRect 获取节点信息（虽然这一步并不是必须的，但有时候可以帮助调试）。
   • 关键的步骤是通过 uni.createSelectorQuery().in(this).select('#myInput') 获取到具体的节点，并调用 focus 方法。

说明

• uni.createSelectorQuery().in(this) 确保在当前的组件上下文中查询DOM节点。
• focus 方法的 focus 参数设置为 true，用于触发软键盘弹出。

通过上述步骤，你可以在uni-app中实现页面打开时自动聚焦输入框并弹出软键盘的功能。确保你的代码在适当的生命周期函数中执行，以避免DOM还未加载完毕就执行DOM操作的问题。