Question

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

这在Chrome和MSIE中运行良好，但在FireFox和Opera中，无论如何都会显示下拉列表。（未在Safari上测试）

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

有没有人知道如何在所有*浏览器中使用它。

“全部”表示所提到的五种浏览器的最新版本。

Answer 1

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

FIDDLE

至少在Firefox中运行，但似乎无法在Chrome中运行？

修改

我无法想出一种检测一种方法是否有效的方法，所以有些浏览器会嗅探。这不是最好的方法，但我能想到的最好的方法，它似乎在我测试过的浏览器中有效：

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

Answer 2

你的这个

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

来自这里link，This 可能对歌剧情况有所帮助，这是一个稍微不同的问题，但你可能能够让它运作

Answer 3

这在大多数情况下都适用于点击和焦点（带标签）：

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

Answer 4

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

如果像我一样，您的自定义HTML / Javascript选项下有隐藏 <select>，但仍希望保持关注隐藏{{1} }（对于辅助功能，选项卡导航，箭头，输入...）。

只需使用<select>。

z-index: -1

Answer 5

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

$（'select option：not（：selected）'）。attr（“disabled”，true）;

防止在FireFox和Opera中打开选择下拉列表

5 个答案: