uniapp 的textarea如何实现一直保持聚焦状态

在uniapp开发中，如何让textarea组件始终保持聚焦状态？目前尝试过auto-focus属性，但只在页面加载时生效，失去焦点后无法自动重新获取焦点。需要实现类似聊天输入框的持续聚焦效果，请问有什么解决方案或替代方案？

2 回复

在uniapp中，textarea无法直接设置自动聚焦。可以通过以下方式实现：

  1. 使用focus()方法
// 页面显示时调用
onShow() {
  this.$nextTick(() => {
    this.$refs.textarea.focus()
  })
}
  1. 结合auto-focus属性
<textarea ref="textarea" auto-focus></textarea>

注意：部分平台可能有限制，建议在需要时手动触发focus()。


在 UniApp 中，可以通过 focus 属性和 focus 事件结合，让 <textarea> 组件保持聚焦状态。以下是实现方法：

核心思路

  • 使用 focus 属性绑定一个变量（如 isFocused），控制聚焦状态。
  • 在 blur 事件触发时，重新设置 isFocused 为 true，强制恢复聚焦。

示例代码

<template>
  <view>
    <textarea 
      :focus="isFocused" 
      @blur="handleBlur" 
      placeholder="输入内容..."
    ></textarea>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFocused: true // 初始设置为聚焦
    };
  },
  methods: {
    handleBlur() {
      // 失去焦点时重新聚焦
      this.isFocused = false;
      this.$nextTick(() => {
        this.isFocused = true;
      });
    }
  }
};
</script>

注意事项

  1. 兼容性：在部分安卓设备上可能需要使用 setTimeout 延迟设置聚焦：
    handleBlur() {
  this.isFocused = false;
  setTimeout(() => {
    this.isFocused = true;
  }, 10);
}
  2. 用户体验：强制聚焦可能干扰正常操作（如键盘收起），建议仅在特定场景使用。
  3. H5 平台：某些浏览器可能限制自动聚焦，需用户主动触发。

替代方案

如果遇到兼容性问题，可尝试通过隐藏输入框模拟聚焦效果，或使用原生输入框插件。

回到顶部