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

Posted 2023-03-11

【中文标题】到达下拉列表时单击iphone移动箭头键，应显示下拉列表内容

【英文标题】：clicking on iphone mobile arrow key when reach to the dropdown list, it should display the dropdown list contents

【发布时间】：2017-02-21 08:06:31

【问题描述】：

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

我在 Safari 浏览器中为我的网络应用程序执行此操作。我已经为下拉菜单编写了 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 mobile 的方向键；当点击箭头键并到达下拉菜单时，它应该显示下拉内容但它不起作用。

IMAGE -- iphone keyboard arrow keys

希望尽快收到大家的来信。谢谢

【参考方案1】：

这是可能的！检查这个：JSFiddle

为您的下拉菜单提供一个 ID，例如 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");
);

【讨论】：

是的。谢谢你。这是一个很好的 hack 来获得预期的结果。