uniapp有办法让input二次获得焦点吗

分类：uni-app

uniapp有办法让input二次获得焦点吗？

focus="focusStatus" 我使用这种方式，只能第一次设置焦点，第二次就无效了，请问是uniapp的bug吗？

2020-08-31 20:16 负责人:无分享

5 个回复

深海智行 - 专注前端培训

我看了，文档里有写
以下为伪代码：
focusStatus=false;nextTick;focusStatus=true;

顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶

梦尋Junjie - 原来她有男朋友

下面给我的解决方案:
//-> js
data() {
return {
focus:false,
}
}
//-> h5
<input :focus="focus" @blur="focus=false" />

//-> 如何重新获取?
推荐使用定时器, 避免有些时候不生效
//-> js

setTimeout(()=>{
this.focus = true;
},800); //-> 这里的800毫秒根据你的业务来,我的是有过渡动画,所以需要在动画过渡完成后才会获取,

//-> 注意每次获取焦点之后 focus的值为 true, 我们需要注意,这是时用的是双向绑定, 如果获取之后再次赋值为 true, 是有可能不会再次出发获取焦点事件的,

所以我们需要加上@blur="focus=false" , 失去焦点后改为 false, 这样在下次需要获取的时候才能成功的出发获取焦点事件,

if(this.isFocus === true){//解决无法获取二次焦点问题
this.isFocus = false
}else{
this.isFocus = true
}

1***@163.com - 一个平凡的码农

this.in_storage_num_focus = false  
this.$nextTick(function() {  
    this.in_storage_num_focus =true  
});

input组件里 :focus="in_storage_num_focus "
参考 uni-app常见问题 4. 组件属性设置不生效解决办法

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