（iPhone 和 iPad）单击外部输入字段时永远不会失去焦点 - HTML/Javascript答案

【问题标题】：(iPhone and iPad) when clicking outside input field never loose´s focus - HTML/Javascript（iPhone 和 iPad）单击外部输入字段时永远不会失去焦点 - HTML/Javascript
【发布时间】：2018-10-04 12:45:05
【问题描述】：

我有这个结构：
<div> <input type="text" name="completeName" id="completeName" value="" maxlength="50"> </div>

在 iOS 上（平板电脑或 iPhone 在 Safari 浏览器上）上单击此输入字段外部时，我无法失去焦点，因此键盘不会自行隐藏。

我该如何解决这个问题？（我在Android环境下测试过，效果不错）

【问题讨论】：

你能分享正确的结构吗，不是在某种抽象代码中，而是在真实代码中？可能，减少到 MVE 会有所帮助
嗨@JoséDantas 我只编辑您的问题以删除签名以帮助您的问题具有“更高质量”
查看@NicoHaase 的评论，如果您将结构添加到问题中可能会更好
@Kalamarico 谢谢 :)
@NicoHaase 我已经用当前结构更新了问题。

标签： javascript ios iphone ipad

【解决方案1】：

经过几天的搜索，我找到了解决方案，如果有人遇到此问题，请检查以下代码：

var isAppleDevice = navigator.userAgent.match(/(iPod|iPhone|iPad)/) != null;

var inputs = jQuery("input");
if ( isAppleDevice ){
        $(document).on('touchstart','body', function (evt) {
            var targetTouches = event.targetTouches;
            if ( !inputs.is(targetTouches)){
                inputs.context.activeElement.blur();
            }
        });
    }

【讨论】：

【解决方案2】：

奇怪的是，我只在 Firefox for iOS 中遇到了这个问题。然而，上面的解决方案奏效了。

这是 VanillaJS 解决方案：

function isiOS() { return navigator.userAgent.match(/ipad|ipod|iphone/i); }

if (isiOS()){
  var ins = [], _ins = document.querySelectorAll("input")
  for(var i = 0; i <ins.length; i++) ins.push(_ins[i])
  document.body.addEventListener('touchstart', event => {
    if(ins.filter(i => i.contains(event.target)).length == 0)
      document.activeElement.blur()
  });
}

【讨论】：