- Published on
微信浏览器安卓键盘收回后表单不失焦的处理
- Authors
- Name
- Hansuku
今天发现一个有点难受的 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();
}
});