关于iphone点击readonly的input虚拟键盘不消失的情况

今天遇到了一个比较棘手的问题,事情是这样的:

咱有一个添加地址的页面,大概长这样:

关于iphone点击readonly的input虚拟键盘不消失的情况

收货地址后那个“请选择收货地址”是一个readonly的input,

咱一进页面,直接点击这个“请选择收货地址”是完全看不出任何毛病的,

但是按照大家的习惯啊,当然是一个一个往下填,

这时问题就来了,安卓手机是正常的,显示这样:

关于iphone点击readonly的input虚拟键盘不消失的情况

可苹果手机不一样了,

咱输了手机号码,点“请选择收货地址”,

这时候,本该关闭的虚拟键盘依然呆在屏幕上,弹出的地址选择器部分显示在虚拟键盘上方,整个页面显得拥挤不堪,(这里没法截图啊!)

那么,如何让这个虚拟键盘关闭就成了一个烧脑的问题了,

于是尝试了网上的各种办法:

①给它加个 -webkit-user-select:none 的style,结果并没有任何变化,pass

②给它加个disabled属性,结果点击的时候虚拟键盘确实没有了,可地址选择器也不出现了,pass

③那就吧input改成span吧?可是依然出现原来那个问题,在这里终于发现了一个现象,当我们点击这个“请选择收货地址”,光标居然还停在刚才输入手机号的那个框里头,这会儿有了点眉目了

④那接着③继续加,在“请选择收货地址”的点击事件里第一行加个this.focus();乖乖,还是不行,具体什么情况记不清啦,pass

⑤于是接着百度了一下:终于在百度知道https://zhidao.baidu.com/question/1240497270717962459.html找到了答案,即

  尝试让获取焦点的元素失去焦点,document.activeElement.blur();

同样,是在“请选择收货地址”的点击事件里第一行加的,一试,果然完美解决了,

接着又把span改回了原来的input,也运行正常!!!

上一篇:【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件


下一篇:关于手机微信端ios的input不能选中问题解决方案