防止在FireFox和Opera中打开选择下拉菜单 [英] Prevent select dropdown from opening in FireFox and Opera

问题描述

在jQuery中，你可以通过在mousedown处理程序中使用event.preventDefault来打开< select> 打开它的下拉菜单。允许你用别的东西替换下拉列表，同时仍然保留表格元素的原始样式。

这在Chrome和MSIE中可以正常工作，但是在FireFox和Opera中，下拉列表无论出现。
（未在Safari上测试过）

示例： http ：//jsfiddle.net/9cmEh/

select元素应该看起来是启用的，并且仍然响应所有的用户交互，就像启用了一样，但是下拉菜单不应该被渲染。相反，下拉菜单将被自定义渲染所替代，例如包括色板，图标或字体，但自定义下拉部分已经在我的项目中完成了。

是否有人知道如何在所有*浏览器中完成这项工作。
$ b

• All表示所提及的五种浏览器的最新版本。 li>
  

解决方案

  $（'select'）。on（'focus'，function（e）{
 this.blur（）; 
 window.focus（）; 
}）; 
} ）; 
  

FIDDLE

在Firefox中工作至少，但似乎没有工作在Chrome？$ / b>

编辑

我不能想出一个体面的方法来检测一个方法是否有效，一些浏览器嗅探代替。不是最好的办法，但是我可以提出最好的办法，它似乎在我测试过的浏览器中工作：

 on（'focus mousedown'，function（e）{
 if（$ .browser.webkit || $。））$ {code> $（function（）{
 $（'select'）。 browser.msie）{
 e.preventDefault（）; 
} else {
 this.blur（）; 
 window.focus（）; 
} 
}）; 
}）; 
  

In jQuery, you can stop a <select> from opening it's dropdown menu by using event.preventDefault in the mousedown handler. Allowing you to replace the dropdown with something else while still retaining the original style of the form element.

This works fine in Chrome and MSIE, but in FireFox and Opera the dropdown appears regardless. (Not tested on Safari)

Example: http://jsfiddle.net/9cmEh/

The select element should look enabled and still respond to all user interaction as if enabled, but the dropdown should not be rendered. Instead the dropdown will be replaced by something custom rendered, such as including color swatches, icons or fonts, but the "custom dropdown" part is already done in my project.

Does anybody know how to make this work in all* browsers.

• "All" meaning the recent versions of the five browsers mentioned.

解决方案

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

FIDDLE

Works in Firefox atleast, but does'nt seem to work in Chrome ?

EDIT

I could'nt come up with a decent way of detecting whether one method works or not, so did some browser sniffing instead. Not really the best way to do it, but the best I could come up with, and it does seem to work in the browsers I've tested :

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

这篇关于防止在FireFox和Opera中打开选择下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！