微信浏览器安卓键盘收回后表单不失焦的处理

      发布在:前端技术      评论:0 条评论

今天发现一个有点难受的BUG,理论应该是安卓的设计缺陷
微信浏览器安卓键盘收回后表单不失焦的处理
这是一个文本域 在安卓上输入完成以后 点击键盘右上角的收回按钮 键盘消失 本来应该是键盘消失表单自动失焦 这个自动失焦在苹果上能够完成 但是安卓上那个输入的光标就一直留在了文本域
微信浏览器安卓键盘收回后表单不失焦的处理
这样就导致了一个问题 键盘收回后我点击页面任何一个位置 都会再次把键盘唤醒弹出 屡试不爽 一开始我认为是下面高德地图和微信浏览器不兼容 于是在地图上做了禁用事件处理 但是无果 随后发现这与input

解决方法

首先想到一件事 键盘唤醒的时候页面的高度就改变了 所以监听下页面 首先记录原页面高度 键盘回收的时候页面高度应该等于原页面高度 这个时候去对文本框进行blur操作

var winHeight = $(window).height(); //获取当前页面高度
$(window).resize(function() {
    var thisHeight = $(this).height();
    if (winHeight - thisHeight > 50) {
        $('body').css('height', winHeight + 'px');
    } else {
        $('body').css('height', '100%');
        $('.edit_area').blur();
        $('.user_name').blur();
        $('.user_tel').blur();
    }
});
Responses