当前位置: 首页 » 前端开发 » js控制手机端的input/textarea元素失去焦点时隐藏键盘
 |  全屏浏览  |  字号调整:

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

haibao 2015-05-19 21:31:36 前端开发 0 1 2.72 k 百度已收录
本文最后更新于2015-05-19,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!
历史上的今天:11月21日,世界问候日 - 1992年,厄瓜多尔发生海豚集体自杀事件

周三凌晨好, 本文除去代码部分,共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;
}

文章编辑:haibao 发布于:2015-05-19 21:31:36

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

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

版权声明:本博客所有文章除特别声明外,均采用 署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!


发表评论

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

切换注册

登录

忘记密码 ?

切换登录

注册