今天遇到了一个比较棘手的问题,事情是这样的:
咱有一个添加地址的页面,大概长这样:
收货地址后那个“请选择收货地址”是一个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,也运行正常!!!