Question

当点击自动填充附近的iphone移动键盘上的箭头键时，我想打开/显示下拉列表内容（就像点击下拉菜单一样）。

我在Safari浏览器中为我的网络应用做这个。我已经为下拉列表写了FOCUS事件，但这并不令人担忧。我正在使用bootstrap split button下拉列表。

<!-- 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 mobile的箭头键;当点击箭头键并下拉到达时，它应显示下拉内容但不起作用。

IMAGE -- iphone keyboard arrow keys

希望很快收到你的回复。感谢

Answer 1

可能！检查一下：JSFiddle

为您的下拉列表添加dropdown1

之类的ID

将此输入插入您的下拉列表附近：

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

当到达下拉列表时点击iphone移动箭头键，它应显示下拉列表内容

1 个答案: