8***@qq.com
8***@qq.com
  • 发布:2020-03-16 11:52
  • 更新:2020-03-16 13:33
  • 阅读:803

【报Bug】【已解决】v3编译模式下,input的focus属性和手动聚焦冲突,导致无法手动聚焦

分类:uni-app

详细问题描述

因为设计需求,需要在登录页面中自定义input的聚焦/失焦状态下的样式,且需要自动获得焦点。

v3编译模式下,通过focus属性使用currFocusIndex变量控制达到自动聚焦input效果,自动聚焦并无问题。但手动点击带有focus属性的input会导致无法聚焦。
相关代码如下:

<view class="input_group">  
      <input type="number" :value="form.phone" :focus="currFocusIndex === 0" :maxlength="11" placeholder="请输入手机号"   
      class="input" :class="{focus: currFocusIndex === 0}" @focus="currFocusIndex = 0" @blur="currFocusIndex = -1"   
      @input="inputPhone" />  
</view>  
<view class="input_group">  
      <input password :maxlength="16" placeholder="请输入密码" class="input" :class="{focus: currFocusIndex === 1}"   
      @focus="currFocusIndex = 1" @blur="currFocusIndex = -1" @input="inputPassword" />  
</view>  

export default {  
    data() {  
        return {  
            currFocusIndex: 0  
        }  
    }  
}

注意以上代码效果在普通编译模式下运行不会有任何问题
目前仅在魅族手机上测试有此问题,iOS未试。

[内容]

重现步骤

[步骤]
进入页面,第一个input自动聚焦后点击第二个input,再点击第一个input。
[结果]
手动点击第一个input会短暂的聚焦并弹出键盘,但是键盘弹起后立马自动收回,监听过变量,确定input自动失焦。
[期望]
input的focus属性和手动聚焦都能使用。
另外希望官方增加定义input的focus类名功能,感觉有此需求的人应该不算少数。

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app,也需要在此说明]
HBuilderX 2.6.5.20200314
[windows版本号]
1909

uni-app运行环境说明

[运行端是h5或app或某个小程序?]
app
[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]
HBuilderX创建
[编译模式是老模板模式还是新的自定义组件模式?]
自定义组件模式

App运行环境说明

[Android版本号]
8.1.0
[手机型号]
魅族v8

联系方式

[QQ]
840261937

2020-03-16 11:52 负责人:无 分享
已邀请:
8***@qq.com

8***@qq.com (作者)

自顶挽尊

8***@qq.com

8***@qq.com (作者)

已自己解决。
我这里因为有两租input,其中第一个需要切换自动聚焦,所以写了 :focus="currFocusIndex === 0",解决方案是不关联currFocusIndex变量,换一个变量就好。如果只有一个input需要自动聚焦,直接写focus就号。

该问题目前已经被锁定, 无法添加新回复