当焦点位于文本框中时，单击上的 Jquery 不起作用

Jquery on click not working when focus is in a text box

本文关键字：单击 不起作用 Jquery 于文本 焦点 文本      更新时间：2023-09-26

我正在搜索框下方创建一个建议框。我希望它，当用户在搜索框中具有焦点，然后单击其中一个建议时，它会触发操作。我尝试使用jquery的on：

$(".searchbox + div").on("click", "a", function() {
  $(".searchbox").val($(this).html());
});

我的HTML结构是这样的：

<input type="search" placeholder="Search" class="searchbox">
<div></div>

链接动态插入输入后面的div内。链接没有href值，所以它们不是真正的链接，我只是希望它们像链接一样。

当我单击其中一个链接时，搜索框会失去焦点，并且由于我拥有的 css，链接会visibility:hidden。我认为搜索框在触发链接操作之前会失去焦点，因此永远不会触发。我该如何解决这个问题？

你可以在这里看到它。

澄清：我认为正在发生的事情：

  1. 用户点击链接

  2. 计算机认为，用户只是在搜索框外单击了

  3. 搜索框变得模糊

  4. CSS看到搜索框模糊，样式说现在提出建议visibility:hidden

  5. 现在，链接不再可单击，因此永远不会触发事件。

在代码中的某个位置，您有一个单击处理程序，它将搜索栏带到顶部，并将 UI 的其余部分显示在视图中。当用户单击搜索栏以外的任何位置时，它将执行。您应该在建议框中添加一个语句，用于检查单击的元素是否是<a>元素。

因此，如果这是单击处理程序。另外，我认为是时候为您的建议div添加一个id了。 

$(document).click(function(e){
    var $clicked = $(e.target);
    if($clicked.tagName == 'A' && $clicked.closest('#suggestionDivId').length>0)
        $(".searchbox").val($(this).html());
    else if(click was outside searchbar)
        //move searchbar up and show UI
    else
        //click happened inside searchbar, do nothing.
})

我不确定为什么没有人理解你的问题，或者为什么这个问题被否决了。这是一个完全有效的问题。

编辑：

我建议将输入和建议div 与另一个div 包装在一起。 为此包装器提供 tabindex="-1" 属性，以便它可以接收模糊/焦点事件。

<div id="wrapper">
<input type="search" placeholder="Search" class="searchbox">
<div></div>
</div>

然后将$(".searchbox").on("blur")更改为$("#wrapper").on("blur")

这样，您可以单击建议框中的任意位置，而不会触发模糊。

或者，mousedown事件在blur事件之前触发。所以试试这个也许

$(".searchbox + div").on("mousedown", "a", function() {
  $(".searchbox").val($(this).html());
});

您可以使用一些插件。这太容易了。例如，如果您使用任何前端框架（如 bootstrap），则可以使用 typeahead.js 插件

相关文章：