js控制ios端的input/textarea元素失去焦点时隐藏键盘

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

同事在测试产品时发现这样一个：“某些页面击完input框，在点空白处时，iOS设备的键盘不能隐藏并且焦点也不会失去”

带着这个问题我进行了测试，发现在安卓的设备上并没有这种问题出现。

于是写js进行测试给document添加一个click事件，发现了问题的原因：

安卓是可以触发click事件的，而iPhone不会触发。

也就是说在iOS设备下你点击空白的document处input并不能失去焦点。

解决办法：

既然click不能触发iPhone的事件，那就需要找触屏事件来触发一次：

objBlurFun("input");//如果不是当前触摸点不在input上,那么都失去焦点
function objBlurFun(sDom,time){
var time = time||300;
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
if(browser.versions.ios){
var obj = document.querySelectorAll(sDom);
for(var i=0;i<obj.length;i++){
objBlur(obj[i],time);
}
}
}
// 元素失去焦点隐藏键盘
function objBlur(sdom,time){
var time = time||300;
if(sdom){
sdom.addEventListener("focus", function(){
document.addEventListener("touchend", docTouchend,false);
},false); }else{
throw new Error("objBlur()没有找到元素");
}
var docTouchend = function(event){
if(event.target!= sdom){
setTimeout(function(){
sdom.blur();
document.removeEventListener('touchend', docTouchend,false);
},time);
}
};}