Question

我正在使用bootstrap，我有一个带有下拉列表的输入字段，用户可以点击按钮或输入字段来获取下拉列表。现在，当用户点击他们不能再输入的输入字段时，问题就出现了：/

我尝试过自动对焦而没有运气，任何人都可以看一下。

谢谢。

这是我的代码：

<div class="container">
<div class="row" style="padding:100px 0 0">
<div class="col-md-5">
<div class="input-group" style="padding: 0 0 10px 0;">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action 
<span class="caret"></span>    </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
    <!-- /btn-group -->
    <input type="text" class="form-control inputBut" aria-label="...">
  </div>

  <!-- /input-group -->   
      <p class="well well-sm">When a user clicks on the input field to type the focus doesn't stay and the user can't type :/.</p>
</div>
</div>
</div>
<script>
$(function () {
$('.form-control').each(function() {
    $(this).click(function() {
        if ($(this).hasClass('inputBut')) {
setTimeout(function() {$('.input-group-btn     button').click();},10);
        } else {
            $(this).parent().find('.input-group-addon').click();
        }
    });
});
});
</script>

JSFiddle

Answer 1

从这条线上的逻辑

$('.input-group-btn button').click();

我猜你想要点击文本框时触发点击并展开下拉列表，实际上你可以简单地

$('.input-group-btn').addClass("open");

这里有jsfiddle给你，但我仍然没有得到在这条线上试图实现的其他条件

$(this).parent().find('.input-group-addon').click();

你甚至没有在你的HTML

上有这个课程

Bootstrap输入字段自动对焦不允许您键入

1 个答案: