javascript - Safari(移动)IOS - 在外部单击时输入不会失去焦点

标签 javascript jquery ios css mobile-safari

我正在做一个提供结果的搜索栏(类似于自动完成),但在 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;
}

最佳答案

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

$(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/

关于javascript - Safari(移动)IOS - 在外部单击时输入不会失去焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44849859/

相关文章:

javascript - 使用 Ajax 和 Laravel 进行实时名称可用性检查

javascript - 修复 div 标签在对话框弹出框内的位置

javascript - 如何查找包含特定数字的任何数字 - 例如 1323 包含数字 "2"

jquery - 根据json数组绘制rect?

php - iOS应用程序需要POST到PHP脚本,然后解析返回的XML

javascript - 将图像上传到 Cloudinary Express.js React Axios post 请求

javascript - 使用 react-router 滚动到同一页面上的组件

jquery - 引导模式标题宽度问题中的数据表

ios - InAppBrowser 注入(inject)脚本(使用 executeScript)

ios - 为消息创建气泡 View