uniapp app端如何保持textarea焦点不自动消失

在uniapp开发APP时，遇到textarea输入框焦点会自动消失的问题。比如在弹出键盘输入内容后，点击其他区域或切换操作时，textarea会失去焦点导致键盘收起，影响用户体验。尝试过设置focus属性或监听blur事件，但效果不理想。请问如何实现类似微信聊天输入框那样，保持textarea焦点不自动消失？需要兼容iOS和Android平台。

2 回复

在uniapp中，保持textarea焦点不自动消失，可以通过以下方法：

  1. 使用focus属性绑定，在失去焦点时重新触发聚焦：
<textarea :focus="isFocus" @blur="onBlur"></textarea>

data() {
  return { isFocus: true }
},
methods: {
  onBlur() {
    this.isFocus = false
    this.$nextTick(() => {
      this.isFocus = true
    })
  }
}
  1. 或者使用uni.createSelectorQuery()获取textarea实例，手动调用focus()方法。

在 UniApp 的 App 端，保持 textarea 焦点不自动消失通常需要处理键盘弹起和页面滚动导致的焦点丢失问题。以下是解决方案：

1. 使用 focus 属性强制保持焦点

在 textarea 上设置 focus 属性，并通过变量控制其状态。

<template>
  <view>
    <textarea 
      :focus="isFocus" 
      @blur="onBlur" 
      placeholder="输入内容"
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFocus: false
    }
  },
  methods: {
    onBlur() {
      // 失去焦点时重新获取焦点
      setTimeout(() => {
        this.isFocus = true;
      }, 10);
    }
  },
  mounted() {
    // 页面加载后自动获取焦点
    this.isFocus = true;
  }
}
</script>

2. 处理键盘弹起和页面滚动

在 pages.json 中配置页面软键盘行为，避免焦点被顶掉：

{
  "path": "你的页面路径",
  "style": {
    "app-plus": {
      "softinputMode": "adjustResize" // 键盘弹起时页面 resize，减少焦点丢失
    }
  }
}

3. 使用 uni.onKeyboardHeightChange 监听键盘高度

通过监听键盘高度变化，动态调整页面布局：

onLoad() {
  uni.onKeyboardHeightChange(res => {
    if (res.height === 0) {
      // 键盘收起时重新聚焦
      this.isFocus = true;
    }
  });
}

注意事项：

  • 用户体验：强制保持焦点可能影响操作流畅性，建议仅在必要时使用。
  • 兼容性：在 iOS 和 Android 上测试确认效果。
  • 性能：避免频繁操作 DOM，防止页面卡顿。

通过以上方法，可以有效保持 textarea 焦点不自动消失。

回到顶部