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

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

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

收货地址后那个“请选择收货地址”是一个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，也运行正常！！！