如何在onmouseout時關閉組合框？

如何在onmouseout時關閉組合框？如何在onmouseout時關閉組合框？

<select onmouseout=""> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option> 
<option value="mercedes">Mercedes</option> 
<option value="audi">Audi</option> 
</select>

來源

2010-06-28 FTI

你不能這樣做（可靠地）。出現的彈出窗口不可用於以編程方式操作（即打開或關閉），並且其行爲由瀏覽器（或操作系統）定義。

爲了擴展這個進一步，IE和Firefox都可以通過模糊選擇元素關閉彈出：

selectEl.blur();

雖然，在鼠標移開甚至事件觸發，當你把鼠標移動到選項中彈出，所以它需要一點駭人聽聞的魔力。在Chrome中，它會模糊選擇元素，但該框將保持打開狀態。

通常最好將UI組件的行爲單獨留下，以便用戶通過與您的網站交互獲得他們期望的體驗。

來源

2010-06-28 13:59:29

嗯，我們可以點擊鼠標的位置或任何地方當它onmouseout。我想如果我們能做到這一點，組合框會自動關閉。 – FTI 2010-06-28 14:05:54

你可以做一個小竅門，像這樣...

<select onmouseover="size = 5" onmouseout="size = 0"> 
<option value="volvo">Volvo</option> 
<option value="saab">Saab</option> 
<option value="mercedes">Mercedes</option> 
<option value="audi">Audi</option> 
</select>

這將擴大鼠標在菜單上然後塌陷它，當你搬出。

編輯：這可能會導致與其他元素放置問題，如果你不小心。

來源

2010-06-28 14:06:18 Shaded

一兩年後，但在別人正在看這個......我能夠通過發送一個鼠標點擊來切換Chrome中select元素的打開/關閉狀態。在此示例中，將鼠標移到切換按鈕上將切換<select>的狀態。這是一個切換，而不是明確的開放或關閉，但爲我工作。

<script type="text/javascript"> 

    function clickSelect(element) { 
     var event = document.createEvent('MouseEvents'); 
     event.initMouseEvent('mousedown', true, true); 
     element.dispatchEvent(event); 
    }; 

    function toggleSelect() { 
     clickSelect(document.getElementById("select")); 
    } 
</script> 


<form> 
    <select id="select"> 
     <option>one</option> 
     <option>two</option> 
    </select> 
    <input type="button" onmouseover="toggleSelect();" value="toggle select state" /> 
</form>

來源

2013-02-01 20:51:21

如何在onmouseout時關閉組合框？

回答

相關問題