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

今天发现一个有点难受的 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();
    }
});