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

Posted 2020-10-05

同事在测试产品时发现这样一个：“某些页面击完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);
        }
     };
    
}