Question

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

在iOS（平板电脑或Safari浏览器上的iPhone）上点击此输入字段外，我无法放松焦点，因此键盘本身不会隐藏。

如何解决此问题？（我在Android环境中测试过，效果很好）

Answer 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();
            }
        });
    }

Answer 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()
  });
}

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

2 个答案: