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

浏览数：23 / 时间：2015年06月09日

问题的原由

同事在制作触屏页面的时候收到产品这样一个需求：“我们的页面为什么点击完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;
}