Js控制iphone端的input/textarea元素失去焦点时隐藏键盘

问题的起因

同事在制做触屏页面的时候收到产品这样一个需求：“咱们的页面为何点击完textarea框，在点空白处时，iphone的键盘不能隐藏？”

咱们就这个问题进行了测试，确实没有隐藏。看了看其它网站的页面，也是有的能隐藏有的不能隐藏。

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;
}