详细问题描述
因为设计需求,需要在登录页面中自定义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
2 个回复
8***@qq.com (作者)
自顶挽尊
8***@qq.com (作者)
已自己解决。
我这里因为有两租input,其中第一个需要切换自动聚焦,所以写了 :focus="currFocusIndex === 0",解决方案是不关联currFocusIndex变量,换一个变量就好。如果只有一个input需要自动聚焦,直接写focus就号。