js控制手机端的input/textarea元素失去焦点时隐藏键盘

作者: haibao 分类: 笔记 发布时间: 2015-05-19 21:31
Done is better than perfect.比完美更重要的是完成。

今天在制作触屏页面的时候收到这样一个需求:“我们的页面为什么点击完input输入框,在点空白处时,iPhone的键盘不能隐藏?”

于是上网搜了搜相关的方法显示隐藏键盘的方法都是基于APP的而没有js的,看来需要自己动手解决了。

于是写js进行测试给document添加一个click事件,发现了问题的原因:

Android是可以触发click事件的,而IPHONE不会触发。

也就是说在iPhone下你点击空白的document处textarea并不能失去焦点。

下面是解决方法的js源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//判断是否为苹果
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_id');
    input = null;
}

本文地址:[js控制手机端的input/textarea元素失去焦点时隐藏键盘],如没有标注转载,均为原创,转载请保留出处和链接,欢迎分享 谢谢。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>