• 热门专题

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

作者:dtdxrk  发布日期:2014-04-23 20:09:55
Tag标签:元素  键盘  端的  
  • 问题的原由

    同事在制作触屏页面的时候收到产品这样一个需求:“我们的页面为什么点击完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;
    }
About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规