uni-app input 聚焦调用@focus，但是收到的event参数值为undefined

uni-app input 聚焦调用@focus，但是收到的event参数值为undefined

开发环境 版本号 项目创建方式
Mac 10.13.6 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：10.13.6

HBuilderX类型：正式

HBuilderX版本号：3.3.3

手机系统：Android

手机系统版本号：Android 4.4

手机厂商：smartisan

手机机型：T1

页面类型：nvue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
<template>  
    <view class="container">  
        <text class="intro">input focus</text>  
        <input class="custom-input" type="number" maxlength="5" auto-blur="true" [@focus](/user/focus)="focusCustomDay()" @input="onCustomDayInput" @tap="selectDay(0)" placeholder="test focus" placeholder-style="font-size:14px; text-align: center;" />  

    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        methods: {  
            focusCustomDay(event) {  
                console.log(" - focusCustomDay",event)  
            },  
            onCustomDayInput(e) {  
                console.log(" - onCustomDayInput",e)  
            },  
            selectDay(d) {  
                console.log(" - selectDay",d)  
            }  
        }  
    }  
</script>  

<style>  
    .custom-input {  
        height: 100rpx;  
        margin: 30rpx;  
        background-color: #F2f2f2;  
        border-radius: 12rpx  
    }  
</style>

操作步骤：

  1. 点击input
  2. [@focus](/user/focus)指定的函数被调用
  3. 打印event值为undefined

预期结果：

input 聚焦调用[@focus](/user/focus)，能收到正常的event参数值

实际结果：

input 聚焦调用[@focus](/user/focus)，但是收到的event参数值为undefined

bug描述：

【报Bug】input 聚焦调用[@focus](/user/focus)，但是收到的event参数值为undefined


更多关于uni-app input 聚焦调用@focus，但是收到的event参数值为undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

@focus=“focusCustomDay($event)” 或者 @focus=“focusCustomDay”

更多关于uni-app input 聚焦调用@focus，但是收到的event参数值为undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 的 nvue 页面中，[@focus](/user/focus) 事件确实可能返回 undefined，这是 nvue 与普通 vue 页面的一个差异。根据官方文档和社区反馈，nvue 中部分事件参数与标准 Web 规范不完全一致，focus 事件可能不携带 event 对象。

解决方案：

  1. 检查事件绑定方式：确保事件绑定正确，例如 [@focus](/user/focus)="focusCustomDay"（不加括号）会自动传递事件对象，而 [@focus](/user/focus)="focusCustomDay()" 会传递 undefined。你的代码中使用了 [@focus](/user/focus)="focusCustomDay()"，这会导致参数丢失。请改为：

    <input [@focus](/user/focus)="focusCustomDay" />

    或显式传递 $event：

    <input [@focus](/user/focus)="focusCustomDay($event)" />

  2. 使用兼容性写法：如果上述修改后仍无效，可能是 nvue 在 Android 4.4 等低版本平台的兼容性问题。建议通过其他方式获取输入框信息，例如在 @input 事件中处理逻辑，或使用 ref 获取输入框实例：

    <input ref="myInput" [@focus](/user/focus)="handleFocus" />
// 在方法中通过 this.$refs.myInput 访问
回到顶部