jquery - 防止选择下拉菜单在 FireFox 和 Opera 中打开

Question

在 jQuery 中，您可以<select>通过在 mousedown 处理程序中使用 event.preventDefault 来阻止 a 打开它的下拉菜单。允许您将下拉列表替换为其他内容，同时仍保留表单元素的原始样式。

这在 Chrome 和 MSIE 中运行良好，但在 FireFox 和 Opera 中无论如何都会出现下拉菜单。（未在 Safari 上测试）

选择元素应该看起来是启用的，并且仍然像启用一样响应所有用户交互，但不应该呈现下拉菜单。相反，下拉菜单将替换为自定义渲染的内容，例如包括颜色样本、图标或字体，但“自定义下拉菜单”部分已经在我的项目中完成。

有谁知道如何在所有*浏览器中进行这项工作。

“全部”表示上述五种浏览器的最新版本。

score 10 · Accepted Answer

$(function() {
    $('select').on('focus', function(e) {
        this.blur();
        window.focus();
    });
});

小提琴

至少可以在 Firefox 中使用，但在 Chrome 中似乎不起作用？

编辑

我无法想出一种体面的方法来检测一种方法是否有效，因此进行了一些浏览器嗅探。不是最好的方法，但我能想到的最好的方法，它似乎在我测试过的浏览器中工作：

$(function() {
    $('select').on('focus mousedown', function(e) {
        if ($.browser.webkit||$.browser.msie) {
            e.preventDefault();
        }else{
            this.blur();
            window.focus();
        }
    });
});

score 1 · Accepted Answer

你这个

               //e.stopPropagation works only in Firefox.
                  if (event.stopPropagation) {
                event.stopPropagation();
                event.preventDefault();
                 }

来自这里的链接，这可能有助于歌剧的情况，这是一个略有不同的问题，但你也许可以让它工作

score 0 · Accepted Answer

在大多数情况下，这应该适用于单击和焦点（使用选项卡）：

$('select').on('focus mousedown', function(e){
    e.stopPropagation();
    e.preventDefault();
    this.blur();
    window.focus();
});

score 0 · Accepted Answer

这是一个已知的错误：https
: //bugzilla.mozilla.org/show_bug.cgi?id=392863 它目前在 firefox ESR32 中。

如果像我一样，您在自定义 HTML/Javascript 选择下隐藏 <select>了一个，并且仍然希望将注意力集中在该隐藏上<select>（用于可访问性、选项卡导航、箭头、输入...）。

只需使用z-index: -1.

.hidden-select {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}

score 0 · Accepted Answer

禁用未选择的元素（选项）。

$('select option:not(:selected)').attr("disabled",true);

jquery - 防止选择下拉菜单在 FireFox 和 Opera 中打开

5 回答 5

Related

Reference