uni-app 多个input，使用变量控制焦点正常，手动点击input时却获取不到焦点

开发环境	版本号	项目创建方式
Windows	windows10	HBuilderX

示例代码：

//nextFocus代码：
nextFocus(inputType){
// uni.hideKeyboard(); //隐藏软键盘
let that = this;
switch(inputType){
case “grade”:
this.gradeFocus = false; // 每次都要初始化 focus 属性
setTimeout(() => {
this.$nextTick(function() {
that.gradeFocus=true
});
},50)
break;
case “class”:
this.classFocus = false; // 每次都要初始化 focus 属性
setTimeout(() => {
this.$nextTick(function() {
that.classFocus=true
});
},50)
break;
case “teacher”:
this.teacherFocus = false; // 每次都要初始化 focus 属性
setTimeout(() => {
this.$nextTick(function() {
that.teacherFocus=true
});
},50)
break;
case “phone”:
this.phoneFocus = false; // 每次都要初始化 focus 属性
setTimeout(() => {
this.$nextTick(function() {
that.phoneFocus=true
});
},50)
break;
case “studentNum”:
this.studentNumFocus = false; // 每次都要初始化 focus 属性
setTimeout(() => {
this.$nextTick(function() {
that.studentNumFocus=true
});
},50)
break;
}
}

更多关于uni-app 多个input，使用变量控制焦点正常，手动点击input时却获取不到焦点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 1楼

更多关于uni-app 多个input，使用变量控制焦点正常，手动点击input时却获取不到焦点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

这是一个典型的 uni-app 中 input 焦点控制问题。问题主要在于手动点击 input 时触发了原生事件，与通过变量控制焦点的逻辑产生了冲突。

建议优化方案：

使用统一的焦点控制变量

data() {
  return {
    currentFocus: '' // 当前获得焦点的input类型
  }
}

修改模板中的 focus 绑定

<input :focus="currentFocus === 'grade'" @focus="setFocus('grade')" />
<input :focus="currentFocus === 'class'" @focus="setFocus('class')" />

简化焦点控制方法

setFocus(type) {
  this.currentFocus = type
}

nextFocus(inputType) {
  this.currentFocus = inputType
}