今天在做公司年会的手机端上墙页面，发现在输入完成后，点击输入框以外的任何区域，键盘收起输入框没有自动回弹。
后面发现这种情部只是在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);
});
