当前位置: 首页 » 笔记 » js控制手机端的input/textarea元素失去焦点时隐藏键盘

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

haibao 笔记 2015-05-19 21:31:36 2168 百度已收录
一个人的价值, 在于他贡献了什么, 而不在于他获得了什么。——爱因斯坦

晚上好, 本文除去代码部分,共829个字,预计阅读时间需要3分钟。

今天在制作触屏页面的时候收到这样一个需求:“我们的页面为什么点击完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元素失去焦点时隐藏键盘

本文地址:http://www.hehaibao.com/js-input-textarea-blur/

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!

发表评论

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