a***@4um.cn
a***@4um.cn
  • 发布:2020-08-31 20:16
  • 更新:2021-05-28 15:16
  • 阅读:2205

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

分类:uni-app
uniapp有办法让input二次获得焦点吗?

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

2020-08-31 20:16 负责人:无 分享
已邀请:
深海智行

深海智行 - 专注前端培训

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

a***@4um.cn

a***@4um.cn (作者)

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

梦尋Junjie

梦尋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, 这样在下次需要获取的时候 才能成功的出发获取焦点事件,

1***@qq.com

1***@qq.com

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

1***@163.com

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. 组件属性设置不生效解决办法

要回复问题请先登录注册