Safari（移动）IOS - 单击外部时输入不会失去焦点

Posted 2023-03-14

【中文标题】Safari（移动）IOS - 单击外部时输入不会失去焦点

【英文标题】：Safari (mobile) IOS - Input doesn't loses focus when clicking outside

【发布时间】：2017-06-30 15:20:00

【问题描述】：

我正在做一个提供结果的搜索栏（类似于自动完成），但在 ios 的 Safari 上，当键盘打开时在输入标签之外点击时它不会失去焦点。

我做了一个简单的 jsfiddle 来演示重现此问题的最少代码：

https://jsfiddle.net/coppolaemilio/0bqrLcwe/4/

html

<input class="selector" type="text">
<ul>
  <li>element</li>
</ul>

JS (jQuery)

$('.selector').focus(function() 
    $('ul').addClass('visible');
);
$('.selector').focusout(function() 
    $('ul').removeClass('visible');
);

CSS

.selector
  margin: 20px;

ul 
  display: none;

ul.visible 
  display: block;

【参考方案1】：

我设法通过使用这个找到了解决方案：

$(document).on('touchstart', function (event) 
  if (!$(event.target).closest('.country-selector').length) 
    if ($('.country-selector').is(":visible")) 
      $('input.country-selector').blur();
    
  
);

https://jsfiddle.net/coppolaemilio/0bqrLcwe/5/