logo标签列表

使用Bootstrap下拉菜单 - 通过Jquery聚焦输入

jquerytwitter-bootstrap
6
我正在使用BootStrap框架的下面的代码。
我的目标是，通过JQuery的点击/焦点功能，在单击<a>名称</a>时将其聚焦于输入区域。我已经知道它与a链接中的data-toggle="dropdown"属性有关，这使得它无法正常工作。我经验不是很丰富。希望有人能给我一些帮助！
<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>
1
你的HTML代码有误，你应该在关闭body标签后而不是之前关闭html标签。 - A. Wolff
3个回答
5

您应该将代码放在文档准备好的处理程序中：

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

查看演示

$(function () {
    $('#dLabel').click(function () {
        setTimeout(function(){$('#login').focus();},0);
    });
    $('.dropdown input[type=text]').click(function(e){
        e.stopPropagation();
    });
});
你能否使用 jsfiddle 来说明你的问题，因为我不明白你在说什么。 - A. Wolff
谢谢您的快速回复！基本上它正在工作，是的。但问题在于与Bootstrap下拉菜单的理解！我在fsfiddle中添加了Bootstrap js库，使其更清晰！请仔细研究一下。我的希望是也许听取Bootstrap下拉功能，然后调用焦点函数。但再次说明，我并没有真正的经验，所以如果有人能帮忙，我会非常高兴！ - nhoyer
这个完美地运行了！只有一个最后的问题需要我理解一下！setTimout()被设置为参数0，意味着没有超时。为什么这不等同于只使用$('#login').focus()？ - nhoyer
即使设置为0，超时也需要几毫秒（8-15）才能触发回调函数。这正好足够让引导程序渲染其HTML/CSS，这可能会干扰任何其他处理程序。在您的情况下，我不确定为什么引导程序会打破触发聚焦，但似乎与CSS伪类有关。 - A. Wolff
0
一个解决方法是使用带有“for”属性的标签元素，而不是使用元素。
...
  <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>
...
0

如果您无法使用标签并想要使用链接，则可以实际观看下拉菜单抛出的事件并以此方式处理。 您可以在以下链接中查看所有事件：https://getbootstrap.com/docs/4.0/components/dropdowns/#events

对于这种情况，您需要使用shown.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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接