前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Textarea输入框失去焦点时隐藏手机键盘

Textarea输入框失去焦点时隐藏手机键盘

作者头像
越陌度阡
发布2020-11-26 16:22:36
2.6K0
发布2020-11-26 16:22:36
举报

今天在做公司年会的手机端上墙页面,发现在输入完成后,点击输入框以外的任何区域,键盘收起输入框没有自动回弹。

后面发现这种情部只是在iphone下才会产生,原来在点击空白的document处textarea并不能失去焦点,解决方案如下:

代码语言:javascript
复制
//判断是否为iphone
var isIPHONE = navigator.userAgent.toUpperCase().indexOf('IPHONE') != -1;
//失去焦点的方法
function ObjOnBlur(id, time) {
    //判断传参是否正确
    if (typeof id != 'string') throw new Error('参数错误');
    //获取文本域textarea标签
    var obj = document.getElementById(id);
    //延迟时间
    var time = time || 300;
    documentTouchend = function (event) {
        // 如果当前点击的元素是不是textarea本身
        if (event.target != obj) {
            //延时隐藏
            setTimeout(function () {
                // textarea会失去焦点
                obj.blur();
                // document移除ontouchend事件
                document.removeEventListener('touchend', documentTouchend, false);
            }, time);
        }
    };
    //如果标签存在
    if (obj) {
        //添加监听事件focus
        obj.addEventListener('focus', function () {
            //添加监听事件touchend
            document.addEventListener('touchend', documentTouchend, false);
        }, false);
    } else {
        throw new Error('没有找到元素');

    }
};

//给元素添加方法
$('textarea').on('blur', function () {
    if (isIPHONE) {
        new ObjOnBlur('textarea的ID');
        textarea = null;
    };
    //滚动到底部
    window.scrollTo(0, 0);

});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/01/18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档