通过 iPad 访问https://harvesthq.github.io/chosen/ 。 也可以通过 Chrome 控制台中的“切换设备工具栏”然后选择“iPad”设备来重现。
在“多选”下,添加一个元素。
现在 - 无需单击其他地方 - 单击“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
在浏览器中工作的解决方法(通过控制台中的“切换设备工具栏”),但不是最直观的,是:
li.search-choice
元素。 注意:单击“x”仍然没有任何作用。这似乎不适用于实际的物理 iPad。
添加元素时,似乎单击甚至没有在适当的时候初始化。
快速扫描选择的 Javascript 代码,我看到正在处理以下核心事件 - 关于点击:
mousedown
mousemove
mouseup
touchstart
touchmove
touchend
我没有看到的是事件处理:
pointerdown
pointermove
pointerup
也许这对此事有影响?
可以确认(至少在伪装成 iPad 的 Chrome 中)您不能从多选中取消选择项目。 点击 X 没有任何作用。
我遇到了同样的问题。
我发现如果您将焦点从选择字段(不仅仅是关闭字段,而是实际上专注于任何其他元素),X 按钮仍然不起作用。 但是在您将再次关注此字段(并显示下拉列表)时,现在您可以成功删除选项。
再次关闭下拉菜单后,X 不起作用。
我可以在 chrome 模拟器和物理设备上重现这个。
只是为了说清楚。 通过退出元素,您需要制作.chosen-container
以删除chosen-container-active
类。 当chosen-container-active
从chosen-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;
};
干杯
汉内斯