Js控制iphone端的input/textarea元素失去焦点时隐藏键盘
来源:互联网 发布:祁县哪个宽带网络好 编辑:程序博客网 时间:2024/05/23 22:18
http://www.cnblogs.com/dtdxrk/p/3682352.html
我们就这个问题进行了测试,确实没有隐藏。看了看其它网站的页面,也是有的能隐藏有的不能隐藏。
IPHONE系统在点击document时textarea为什么没有失去焦点?
同样的问题我又在Android系统上测试了一下可以自动隐藏,只有IPHONE有这问题。
于是上网搜了搜相关的方法显示隐藏键盘的方法都是基于APP的而没有js的,看来需要自己动手解决了。
于是写js进行测试给document添加一个click事件,发现了问题的原因:
android是可以触发click事件的,而IPHONE不会触发。
也就是说在IPHONE下你点击空白的document处textarea并不能失去焦点。
使用触屏事件
既然click不能触发IPHONE的事件,那就需要找触屏事件来触发一次:
ontouchstart
ontouchmove
ontouchend
ontouchcancel
最后我选择用ontouchend,手指离开屏幕时触发。
想过的办法1:点击A标签可以让textarea失去焦点
在textarea获得焦点时,点击A标签可以让textarea失去焦点,隐藏IPHONE的键盘。
实现的思路就是:
1.textarea在获得焦点时
2.当ontouchend移动到document空白处时创建一个A标签,模拟A标签的点击事件
3.textarea失去焦点,隐藏IPHONE的键盘
这个方法想出来简单实验了一下,感觉太蛋疼了,直接pass掉。。。
想过的办法2:让textarea主动失去焦点
1.textarea获得焦点时
2.给document添加一个ontouchend事件,判断当前点击的元素是不是textarea本身 如果不是 textarea会失去焦点
3.document移除ontouchend事件
觉得还是这个方法靠谱,最终按照这个思路去解决。
最终方法
1.由于是在触屏上使用所以没有用到IE的二级事件。
2.做了一个判断,只在IPHONE上触发。
3.当时做完了同事说方法执行的太快了,客户来不及反应键盘就隐藏了,于是添加了一个time参数用做settimeout设置。
//判断是否为苹果var isIPHONE = navigator.userAgent.toUpperCase().indexOf('IPHONE')!= -1;// 元素失去焦点隐藏iphone的软键盘function objBlur(id,time){ if(typeof id != 'string') throw new Error('objBlur()参数错误'); var obj = document.getElementById(id), time = time || 300, docTouchend = function(event){ if(event.target!= obj){ setTimeout(function(){ obj.blur(); document.removeEventListener('touchend', docTouchend,false); },time); } }; if(obj){ obj.addEventListener('focus', function(){ document.addEventListener('touchend', docTouchend,false); },false); }else{ throw new Error('objBlur()没有找到元素'); }}if(isIPHONE){ var input = new objBlur('input'); input=null;}
- js控制iphone端的input/textarea元素失去焦点时隐藏键盘
- Js控制iphone端的input/textarea元素失去焦点时隐藏键盘
- Js控制iphone端的input/textarea元素失去焦点时隐藏键盘
- 我的Web学习之路1——input,textarea获得/失去焦点时隐藏/显示文字
- h5键盘遮挡输入框问题 、模仿微信输入框失去焦点时隐藏iphone的软键盘和聚焦时出现输入框
- input 输入框获得/失去焦点时隐藏/显示文字
- input 输入框获得/失去焦点时隐藏/显示文字
- 键盘显示时Editext获取焦点,键盘隐藏时失去焦点
- 移动端开发,IOS、iPhone,表单input元素获取焦点时页面被放大的解决办法。
- 移动端开发,IOS、iPhone,表单input元素获取焦点时页面被放大的解决办法。
- input获取焦点时候value值隐藏,失去焦点的时候显示
- js在input失去焦点时对身份证、手机号、邮箱的合法性验证
- javascript 控制ios textarea 不失去焦点问题
- js 使元素获取或失去焦点
- html中的css和js控制input,textarea文本框自动获取焦点
- EditText失去焦点时,键盘收起的布局
- jquery input失去焦点时触发
- input获得焦点,失去焦点
- hdoj 2000
- 如何生成KeyStore
- 单KEY业务,数据库水平切分架构实践 | 架构师之路
- okHttp工具类,实现get和post
- yii2常用方法
- Js控制iphone端的input/textarea元素失去焦点时隐藏键盘
- hdoj 2001
- 面试题目
- SqlServer循环查询
- 关于requireJs基础的总结
- mysql语句执行顺序
- 排序算法
- Java并发编程:volatile关键字解析
- The content of the adapter has changed but ListView did not receive a notification终极解决方法