Question

我正在使用下面的代码，它是Bootstrap Framework的一部分。

我的目标是通过Jquery的点击/焦点功能点击<a>name</a>来集中输入。我已经知道data-toggle="dropdown"链接中的a属性使其无效。我不是很有经验。希望有人能帮到我！

<html>
<body>
<li class="dropdown">
<a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#"><i class="icon-user"></i> name </a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>
<form ...>                                      
<input type="text" id="4711" /> 
</form>
</li>
</ul>
</li>
</body>
</html>



<script>
$('#dLabel').click(function() {
  $('#4711').focus();
});
</script>

Answer 1

您应该将代码放在文档就绪处理程序中：

{对于bootstrap，您可以使用超时作为简单的解决方法}

SEE DEMO

$(function () {
    $('#dLabel').click(function () {
        setTimeout(function(){$('#login').focus();},0);
    });
    $('.dropdown input[type=text]').click(function(e){
        e.stopPropagation();
    });
});

Answer 2

解决方法是使用带有for属性的label元素而不是元素。

...
  <li class="dropdown">
    <label for="4711" class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown">
    <i class="icon-user"></i> name </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li>
      <form ...>                                      
        <input type="text" id="4711" /> 
      </form>
      </li>
    </ul>
  </li>
...

Answer 3

如果您无法使用标签并想使用链接，那么您实际上可以观看下拉菜单引发的事件并以这种方式进行处理。您可以在以下位置查看所有事件：https://getbootstrap.com/docs/4.0/components/dropdowns/#events

在这种情况下，您需要使用show.bs.dropdown事件，以便您的代码如下：

<html>
    <body>
        <li id="dropdownParent" class="dropdown">
            <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#"><i class="icon-user"></i> name </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <li>
                    <form ...>
                        <input type="text" id="4711" />
                    </form>
                </li>
            </ul>
        </li>
    </body>
</html>

<script>
  $('#dropdownParent').on('shown.bs.dropdown', function() {
    $('#4711').focus();
  });
</script>

使用Bootstrap Dropdown - 通过Jquery聚焦输入

3 个答案: