нажав на iphone mobile arrow key, когда вы попадаете в раскрывающийся список, он должен отображать содержимое выпадающего списка

Question

Я хочу открыть/показать содержимое раскрывающегося списка (так же, как при нажатии на раскрывающийся список), когда клавиши со стрелками на мобильной клавиатуре iphone рядом с автозаполнением.

Я делаю это для своего веб-приложения в браузере Safari. Я написал событие FOCUS для выпадающего списка, но это не беспокоит. Я использую выпадающие кнопки кнопки загрузки bootstrap.

<!-- 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; 
    }); 

На рисунке ниже показаны клавиши со стрелками от 6 iphone мобильного; когда нажимают на клавишу со стрелкой и выпадающее меню, оно должно отображать раскрывающееся содержимое, но оно не работает.

IMAGE -- iphone keyboard arrow keys

Надежды услышать от вас всех, в ближайшее время. Спасибо

Answer 1

Это есть возможно! Проверьте это: JSFiddle

Дайте DropDown идентификатор как dropdown1

Вставьте этот вход где-то рядом с вашим выпадающего меню:

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

Скрыть вход с CSS:

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

Добавить JavaScript:

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