3

<select>jQuery では、マウスダウン ハンドラーで event.preventDefault を使用して、ドロップダウン メニューが開かないようにすることができます。フォーム要素の元のスタイルを維持しながら、ドロップダウンを別のものに置き換えることができます。

これは Chrome と MSIE では正常に機能しますが、FireFox と Opera ではドロップダウンが関係なく表示されます。(Safari ではテストされていません)

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

select 要素は有効に見え、有効であるかのようにすべてのユーザー インタラクションに応答する必要がありますが、ドロップダウンはレンダリングされません。代わりに、ドロップダウンは、色見本、アイコン、フォントなど、カスタム レンダリングされたものに置き換えられますが、「カスタム ドロップダウン」部分は私のプロジェクトで既に行われています。

すべての*ブラウザーでこれを機能させる方法を知っている人はいますか?

  • 「すべて」は、言及された 5 つのブラウザーの最近のバージョンを意味します。
4

5 に答える 5

10 
$(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();
        }
    });
});​
于 2012-07-22T20:14:20.630 に答える
1

あなたのこれ

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

hereリンクから来ました 、 これはオペラの状況に役立つかもしれません、それは少し異なる質問ですが、あなたはそれを働かせることができるかもしれません

于 2012-07-22T20:11:56.030 に答える
0

これは既知のバグです: 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;
}
于 2016-01-06T17:46:08.463 に答える
0

これは、ほとんどの場合、クリックとフォーカス (タブを使用) の両方で機能するはずです。

$('select').on('focus mousedown', function(e){
    e.stopPropagation();
    e.preventDefault();
    this.blur();
    window.focus();
});
于 2015-11-12T08:58:37.920 に答える