关于iphone点击readonly的input虚拟键盘不消失的情况
2024-08-24 10:48:43
今天遇到了一个比较棘手的问题,事情是这样的:
咱有一个添加地址的页面,大概长这样:
收货地址后那个“请选择收货地址”是一个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,也运行正常!!!
最新文章
- 命名困惑系列之一:关于state和status的粗浅研究
- js根据不同浏览器(分辨率)调用不同css
- MongoDB学习笔记-06 数据库命令、固定集合、GridFS、javascript脚本
- 为什么说基于TCP的移动端IM仍然需要心跳保活?
- Webwork 学习之路【05】请求跳转前 xwork.xml 的读取
- 学习之道-从求和起-求和曲线面积瞬时速率极限微积分---求和由高解低已知到未知高阶到低阶连续自然数的K次方之和
- POJ 3172 Scales (01背包暴力)
- POJ 2280&;&;hdu 1661
- faplayer编译配置经验
- php MVC 及例子解释
- HTTP请求方式中get和post的区别
- U磁盘检测和大量收集量产工具
- Web开发在线工具
- uva10954 - Add All(multiset功能)
- Eddy's mistakes(字母大小写转换)strlwr函数的应用
- jmeter3.3测试需要登录的接口(java)
- 【转】Nginx的启动、停止与重启
- Poj2749:Building roads
- 学习Android路上的一些感慨和总结,慢慢来,比较快!
- HDFS副本放置策略