Dios
Dios
  • 发布:2017-03-16 20:38
  • 更新:2020-12-28 16:25
  • 阅读:6145

原生JS代码解决picker与软键盘冲突

分类:MUI

//原生JS代码解决picker与软键盘冲突
//初始化picker
var picker = new mui.PopPicker();

//给picker设置列表参数
picker.setData([{value:'zz',text:'智子'}]);

/点击'#inputPicker'触发显示picker控件/
document.getElementById('inputPicker');.addEventListener('tap', function(event) {
pickerBlur(); //处理ios失去焦点的坑
picker.show(function(items) {
console.log(selectItems[0].text);//智子
console.log(selectItems[0].value);//zz
});
}, false);

/让当前页面所有input失去焦点,关闭软键盘/
function pickerBlur(){
var inputs = document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i ) {
inputs[i].blur();
}
}
/当手机先触发软键盘,input未失去焦点,再点击picker控件,---此时呈现的BUG为软键盘和picker控件同时呈现,理想解决结果,先让软键盘消失,再呈现picker控件。/
//初始化获取当前手机可视高度
var windewHeight = document.body.clientHeight ;

//获取当前页面全部pickerBox
var poppicker = document.getElementsByClassName('mui-poppicker');

//获取其他类型pickerBox --- 作者在二级联动城市的时候使用的
var dtpicker = document.getElementsByClassName('mui-dtpicker');

//作者在网上查询到最神奇的软键盘监控方法!---软键盘打开的时候,会让浏览器的可视高度发生改变。
window.onresize = function(){ //window.onresize为浏览器宽度发生变化时触发的事件

// 那么,如果页面当前高度不等于初始化的高度时,意味着软键盘正在打开。
if(windewHeight !=document.body.clientHeight ){
// 当软键盘打开的时候将mui-poppicker隐藏
if(!poppicker.length) return
for (var i=0;i<poppicker.length;i++ ) {
poppicker[i].style.display="none";
}
if(!dtpicker.length) return
for (var i=0;i<dtpicker.length;i ) {
dtpicker[i].style.display="none";
}

// 相反的,当初始化的屏幕高度等于当前屏幕高度时,意味着软键盘完全收起。
else{
// 当软键盘收起0.15s后,再将mui-poppicker显示
setTimeout(function(){
if(!poppicker.length) return
for (var i=0;i<poppicker.length;i ) {
poppicker[i].style.display="inline";
}
if(!dtpicker.length) return
for (var i=0;i<dtpicker.length;i ) {
dtpicker[i].style.display="inline";
}
},150)
}
}

作者表示第一次写这类东西,有BUG欢迎指正

3 关注 分享
5***@qq.com 前端_小白 NixerSo5

要回复文章请先登录注册

5***@qq.com

5***@qq.com

uni.onKeyboardHeightChange((res) => {

var jianpanheihg=res.height;
console.log(jianpanheihg);
if(jianpanheihg==0){
that.recivePostMessage();
}else{
that.jianpanheihg=jianpanheihg;
that.message();
}
})
文章地址:www.yujianni.top/news/comp_artinfo.html?id=299
2020-12-28 16:25
j***@163.com

j***@163.com

回复 拓荒 :
for (var i=0;i<inputs.length;i ) {
inputs[i].blur();
}
}
卡死的原因是,这里的for写错了
2018-05-10 10:38
拓荒

拓荒

这样写后我的整个应用就卡死了
2017-08-31 08:25
Dios

Dios (作者)

回复 diken :
你解决了吗?
2017-06-29 12:53
Dios

Dios (作者)

回复 5***@qq.com :
谢谢指正,我已经修改了
2017-06-29 12:52
Dios

Dios (作者)

回复 5***@qq.com :
啊??后来你是怎么实现的呢??
2017-06-29 12:51
diken

diken

点击picker控件时,软键盘不会失去焦点吗?我也现在也是这方面有bug,不过是使用picker和mask同时使用,mui.back就除现bug了
2017-05-17 18:07
5***@qq.com

5***@qq.com

回复 5***@qq.com :
for (var i=0;i<inputs.length;i++ ) {
inputs[i].blur();
}
2017-05-15 15:13
5***@qq.com

5***@qq.com

大神,我试过不好使,为什么呢?他们还是会同时出现。
2017-05-15 14:59