Chosen: iPad:无法关闭/删除 li.search-choice(`click.chosen` 事件永远不会触发)

创建于 2018-12-04  ·  5评论  ·  资料来源: harvesthq/chosen

重现步骤

  1. 通过 iPad 访问https://harvesthq.github.io/chosen/ 。 也可以通过 Chrome 控制台中的“切换设备工具栏”然后选择“iPad”设备来重现。

  2. 在“多选”下,添加一个元素。

  3. 现在 - 无需单击其他地方 - 单击“x”以删除添加的元素。 什么都没发生。

预期行为

li.search-choice元素应该被删除。 应取消选择select.chosen-select option

实际行为

li.search-choice元素保持不变。 select.chosen-select option继续被选中。 事件chosen.click永远不会触发。

环境

  • 选择的版本:1.8.7(在选择的网站上)和~1

  • jQuery 或原型版本:3.2.1(在选择的网站上)和 2.1.4 和 2.2.4

  • 浏览器和版本:Chrome,版本 70.0.3538.110(官方版本)(64 位)

  • 操作系统和版本:Windows 10,版本 1709,操作系统内部版本 16299.492

附加信息

在浏览器中工作的解决方法(通过控制台中的“切换设备工具栏”),但不是最直观的,是:

  1. 从展开菜单中选择一个元素,以便添加li.search-choice元素。 注意:单击“x”仍然没有任何作用。
  2. 点击网站上的其他地方; 即在所选字段之外。
  3. 单击所选字段,以便展开搜索菜单。
  4. 现在“x”可以在先前添加的元素上单击,并且正确单击它会删除该元素。

这似乎不适用于实际的物理 iPad。

想法

添加元素时,似乎单击甚至没有在适当的时候初始化。

快速扫描选择的 Javascript 代码,我看到正在处理以下核心事件 - 关于点击:

  • mousedown
  • mousemove
  • mouseup
  • touchstart
  • touchmove
  • touchend

我没有看到的是事件处理:

  • pointerdown
  • pointermove
  • pointerup

也许这对此事有影响?

Bug iOS

所有5条评论

可以确认(至少在伪装成 iPad 的 Chrome 中)您不能从多选中取消选择项目。 点击 X 没有任何作用。

我遇到了同样的问题。

我发现如果您将焦点从选择字段(不仅仅是关闭字段,而是实际上专注于任何其他元素),X 按钮仍然不起作用。 但是在您将再次关注此字段(并显示下拉列表)时,现在您可以成功删除选项。

再次关闭下拉菜单后,X 不起作用。

我可以在 chrome 模拟器和物理设备上重现这个。

只是为了说清楚。 通过退出元素,您需要制作.chosen-container以删除chosen-container-active类。 当chosen-container-activechosen-container移除并被新焦点再次应用时,此时它运行良好。

好的,我不确定这里到底是什么问题,但我让它为我工作。

首先,我在初始化时使用这些选项:

el.chosen({
    display_selected_options: false,
    hide_results_on_select: false,
});

由于某些原因,当您不专注于某个领域时,选择会阻止与控件的任何交互。

我发现当你点击外部字段results_hide被调用时,这个方法完全阻止了字段的访问(至少在手机/平板电脑上)。 所以我正在寻找一种方法来防止这种行为。

似乎将results_showing标志设置为 false 会导致此错误。

Chosen.prototype.results_hide = function() {
  if (this.results_showing) {
    this.result_clear_highlight();
    this.container.removeClass("chosen-with-drop");
    this.form_field_jq.trigger("chosen:hiding_dropdown", {
      chosen: this
    });
  }
  // removed because of mobile issue with removeing options
  // return this.results_showing = false;
};

从源代码中删除它(不方便,但现在没有其他选择),应该可以解决问题。

我不确定这实际上在做什么,但目前我没有注意到任何副作用。

我刚刚为所有移动设备和平板电脑禁用了选择。 不知道内置的触摸选择界面是否比选择的输入框更人性化。 只是缺少搜索选项,但在触摸设备上感觉很奇怪。

第590行:

    AbstractChosen.browser_is_supported = function() {
      if ("Microsoft Internet Explorer" === window.navigator.appName) {
        return document.documentMode >= 8;
      }
      if (/iP(od|hone)/i.test(window.navigator.userAgent) || /IEMobile/i.test(window.navigator.userAgent) || /Windows Phone/i.test(window.navigator.userAgent) || /BlackBerry/i.test(window.navigator.userAgent) || /BB10/i.test(window.navigator.userAgent) || /Android.*Mobile/i.test(window.navigator.userAgent)) {
        return false;
      }
      if ((/iPhone|iPod|iPad|Android|android|playbook|silk|BlackBerry/).test(navigator.userAgent))
      {
        return false;
      }
      if (/Android/i.test(window.navigator.userAgent)) {
        if (/Mobile/i.test(window.navigator.userAgent)) {
          return false;
        }
       }
       return true;
     };

干杯
汉内斯

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

piercemcgeough picture piercemcgeough  ·  5评论

SFPink picture SFPink  ·  9评论

zerocrates picture zerocrates  ·  7评论

mcclurem picture mcclurem  ·  4评论

blankhang picture blankhang  ·  7评论