uni-app nvue页面的textarea聚焦之后无法失去焦点 点击非输入区域不执行失去焦点事件

uni-app nvue页面的textarea聚焦之后无法失去焦点 点击非输入区域不执行失去焦点事件

示例代码：

<textarea @focus="fouce" @blur="inputBlur" placeholder="请输入内容" />
export default{
data:()=>{
return{}
},
methods:{
fouce(e){
console.log('获取焦点事件')
},
inputBlur(e){
console.log('失去焦点事件')
}
}
}

操作步骤：

<textarea @focus="fouce" @blur="inputBlur" placeholder="请输入内容" />
export default{
data:()=>{
return{}
},
methods:{
fouce(e){
console.log('获取焦点事件')
},
inputBlur(e){
console.log('失去焦点事件')
}
}
}
创建nvue页面，执行代码，安装到安卓手机，无法失去焦点

预期结果：

nvue页面的textarea聚焦之后失去焦点，点击非输入区域执行失去焦点事件

实际结果：

nvue页面的textarea聚焦之后无法失去焦点，点击非输入区域不执行失去焦点事件

信息类别 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 windows 10
HBuilderX类型 正式
HBuilderX版本 3.1.12
手机系统 Android
手机系统版本 Android 9.0
手机厂商 华为
手机机型 荣耀 V10
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app nvue页面的textarea聚焦之后无法失去焦点 点击非输入区域不执行失去焦点事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

解决了没

更多关于uni-app nvue页面的textarea聚焦之后无法失去焦点 点击非输入区域不执行失去焦点事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


解决了没

解决了吗？

这是一个已知的nvue页面中textarea组件的兼容性问题。在Android平台上，nvue页面的textarea组件确实存在点击非输入区域无法触发blur事件的情况。

解决方案：

  1. 使用hideKeyboard方法：
// 在需要失去焦点的位置调用
uni.hideKeyboard()
  1. 添加触摸事件监听：
<template>
  <view [@touchstart](/user/touchstart)="handleTouchStart">
    <textarea 
      ref="textarea" 
      @focus="fouce" 
      @blur="inputBlur" 
      placeholder="请输入内容" 
    />
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchStart(e) {
      // 判断点击的是否为textarea以外的区域
      if (!this.isTextareaEvent(e)) {
        uni.hideKeyboard()
      }
    },
    isTextareaEvent(e) {
      // 判断事件目标是否为textarea
      const textarea = this.$refs.textarea
      // 需要根据实际坐标判断点击区域
      return false // 简化判断逻辑
    },
    fouce(e) {
      console.log('获取焦点事件')
    },
    inputBlur(e) {
      console.log('失去焦点事件')
    }
  }
}
</script>
回到顶部