點擊iphone移動箭頭鍵時到達下拉列表，它應該顯示下拉列表內容

Question

我想要打開/顯示下拉列表內容（就像點擊下拉菜單時）當iphone移動鍵盤上的箭頭鍵點擊自動填充附近。

我在safari瀏覽器中爲我的web應用程序執行此操作。我已經爲下拉菜單寫了FOCUS事件，但它並不令人擔憂。我正在使用引導分割按鈕下拉菜單。

<!-- Split button --> 
<div class="btn-group"> 
    <button type="button" class="btn btn-danger">Action</button> 
    <button type="button" class="inFocusedDropdown btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    <span class="caret"></span> 
    <span class="sr-only">Toggle Dropdown</span> 
    </button> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div> 

焦點事件是：

var clickOnce = 0; 
    $(".inFocusedDropdown").focus(function(event){ 
     event.stopImmediatePropagation(); 
     clickOnce += 1; 
     if(clickOnce == 1){ 
      $(this).trigger("click"); 
     } 
     clickOnce = 0; 
    }); 

下面的圖像示出了從iphone 6移動箭頭鍵;當點擊箭頭鍵並且下拉達到時，它應該顯示下拉內容，但它不工作。

IMAGE -- iphone keyboard arrow keys

希望從你們聽到的，很快。謝謝

Answer 1

它是可能！檢查：JSFiddle

給你的下拉一個ID喜歡dropdown1

插入此輸入靠近你的下拉地方：

.focus-trigger { 
    width:0; 
    height: 0; 
    opacity: 0; 
} 

添加JavaScript的：

<input class="focus-trigger" triggerid="dropdown1" /> 

用CSS隱藏輸入：

$(".focus-trigger").focus(function(e){ 
    $("#"+$(this).attr("triggerid")).trigger("click"); 
});