如何更改IE中選擇標簽的這種行為

Question

這是我的問題：

我有一個帶有兩個選項的選擇標簽-“ Hello”和“ World”

HTML

<select>
<option> Hello </option>
<option> World </option>
</select>

在IE中，當您選擇一個選項並將其變為所選選項時，藍色高亮顯示將一直保留，直到您單擊選擇標記之外的其他位置為止。 （在Firefox中不是那樣）

所以我寫了一個腳本，當選擇了一個選項時，該腳本從元素上移開了焦點。

腳本

$('select').change(function() {
        $(this).blur();

但是仍然存在一個小問題：如果我選擇“ Hello”然后獲得“ Hello”選項-焦點將保持不變，並且藍色突出顯示。 但是，如果我選擇打招呼，然后選擇世界選項，則一切正常。.我讀到對於選擇菜單，當選擇了一個選項時，發生更改事件！！但是該選項必須與先前選擇的選項不同才能觸發更改事件。

有沒有辦法即使再次選擇相同的選項也不會出現這種藍色突出顯示。

Answer 1

您可以在select選項上使用click事件，假設select的ID為select ：

$('option').click(function() {
    $('#select').blur();
});

編輯

如果選項是動態添加的，則執行（假設select具有id select :）

$('#select').on('click', 'option', function() {
    $('#select').blur();
});

編輯2

按回車鍵得到相同的結果：

$('#select').keydown(function(event) {
    // Enter pressed
    if(event.keyCode == 13) {
        $('select').blur();
    }
});

Answer 2

如何使焦點模糊？ 不確定如何在IE中表現出來。

$('select').focus(function() {
   $(this).blur();
});

編輯：愚蠢的我，您實際上可以只使用CSS刪除輪廓。 無需使用Javascript！

select, select:focus, select:active { outline: none; }