去除ios端输入框的弹出
在项目中遇到的一个问题,用的是一个地址选择插件,当点击input输入框时底部会弹出地址供选择。但是出现了一个小小的问题,在ios端会出现底部红框标出的输入框,虽然说不影响使用吧,但是在视觉效果上不是很好。(安卓端没有出现这个问题),在解决这个问题的过程也踩了不少的坑,一开始觉得把input的readonly设置为readonly就能解决问题,现实是并没有任何变化只是不能手动输入值底部的弹框依然存在。然后我就在想弹框是在我点击input输入框时出现的,那能不能够当input获取焦点时执行方法把弹框隐藏掉。在慢慢分析中就想到在获取焦点的时候执行失去焦点事件这样弹框就没法弹出了,自然而然就想到了onfocus事件和blur事件,写了一句“onfocus="this.blur()”果然ios端底部弹框的问题就解决了。我又投身于改下一个bug中了。
代码:
<div class="content-block">
<input id="demo1" type="text" readonly="readonly" placeholder="城市选择特效" value="广东省,深圳市,南山区" onfocus="this.blur()">
<input id="value1" type="hidden" value="20,234,504">
</div>