Question

的一个变体

我想使用输入字段而不是按钮来切换下拉菜单。问题在于，如果没有额外的代码，则在切换到输入时不会打开下拉列表。这可以通过focusin事件捕获。

我找到了一个可行的解决方案（如下所示），但这有点古怪，它可以打开-关闭-打开点击下拉列表，尽管我看不到可见的闪烁。

现在，单击进入编辑控件将首先触发focusin事件，然后触发click事件。与另一个问题一样，我尝试通过调用e.stopPropagation()，e.preventDefault()并从事件处理程序返回false来阻止引导程序打开点击下拉列表；没有任何效果。效果是下拉菜单快速闪烁并立即消失。从#msg文本可以看出，单击首先触发了focusin，然后触发了click事件。

有什么建议吗？

一个想法是在focusin事件期间触发单击，但是现在这意味着在物理单击时，单击事件被触发两次，并且下拉菜单闪烁。我也不确定还有哪些其他不良副作用。

HTML（为简化起见，已简化）：

<div class="ml-4">
  <input type="text" class="form-control" id="Medium" name="Medium" placeholder="Medium" value="">
</div>
<div class="ml-4 dropdown">
  <input type="text" class="form-control" id="Material" name="Material" placeholder="Material" value="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <div class="dropdown-menu" aria-labelledby="Material">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>
<div class="ml-4">
 <div style="height:200px;"></div>
 <input type="text" class="form-control" id="Dummy" name="Dummy" placeholder="Dummy" value="">
 <p id="msg">S</p>
</div>

JS工作（处理#msg的代码用于调试）

$("#Material").focusin(function(e) {
 $("#msg").text($("#msg").text() + '-i');
 $(this).dropdown('toggle');
});
$("#Material").click(function(e) {
 $("#msg").text($("#msg").text() + '-c');
 // when removing the following line, neither e.stopPropagation(), e.preventDefault(), nor returning false helps
 $(this).dropdown('toggle');
});
$("#Material").focusout(function(e) {
 $("#msg").text($("#msg").text() + '-o');
});

Answer 1

我可能已经找到解决方法：将input包裹在div中，触发input的父级上的下拉菜单，并阻止click事件的传播。

HTML：

<input type="text" class="form-control" id="Material" name="Material" placeholder="Material" value="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

成为

<div data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   <input type="text" class="form-control" id="Material" name="Material" placeholder="Material" value="">
</div>

JS ：（仅零件已更改）

$("#Material").focusin(function(e) {
 $("#msg").text($("#msg").text() + '-i');
 $(this).parent().dropdown('toggle');
});
$("#Material").click(function(e) {
 e.stopPropagation();
 $("#msg").text($("#msg").text() + '-c');
});

此解决方案似乎可以正常工作。

如何使用输入字段作为Bootstrap 4下拉菜单的切换

1 个答案: