jQuery：单击特定元素时防止输入焦点丢失答案

【问题标题】：jQuery: Prevent focus loss of input when clicking on specific elementjQuery：单击特定元素时防止输入焦点丢失
【发布时间】：2019-05-10 13:17:46
【问题描述】：

我有一个包含自定义下拉菜单的输入。当您单击菜单项时，它应该将输入的值设置为项的文本。我还希望在输入失去焦点时隐藏菜单。这产生了一个问题，单击菜单项会使输入失去焦点并在菜单项的单击事件可以运行之前隐藏菜单。我该如何解决这个问题？

$(document).on('click', '#inputMenu li', function (e) {
    $('#input').val($(this).text());
    $('#inputMenu').removeClass('active');
    e.preventDefault();
    return false
});
  
$('#input').on('focusout',function(e) {
    $('#inputMenu').removeClass('active');
});
 
$('#input').on('input',function(e) {
    $('#inputMenu').addClass('active');
});

#inputMenu {
  display: none;
}

#inputMenu.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input" type="text" placeholder="type something">
<ul id="inputMenu">
  <li>Click me to set text 1</li>
  <li>Click me to set text 2</li>
  <li>Click me to set text 3</li>
  <li>Click me to set text 4</li>
</ul>

【问题讨论】：

你能添加一点 HTML 并将你的代码转换为可运行的 sn-p 吗？
已添加片段。
既然你已经有了很好的答案，我就不再添加了。只是一个简短的说明：对我作为用户来说，使用 focus 和 blur 会比 input 和 focusout 更直观

标签： jquery

【解决方案1】：

这个问题是由事件的顺序引起的。您可以使用一个技巧，将 click 事件替换为在 focusout 之前触发的 mousedown。

$(document).on('mousedown', '#inputMenu li', function (e) {
    $('#input').val($(this).text());
    $('#inputMenu').removeClass('active');
    e.preventDefault();
    return false
});
  
$('#input').on('focusout',function(e) {
    $('#inputMenu').removeClass('active');
});
 
$('#input').on('input',function(e) {
    $('#inputMenu').addClass('active');
});

#inputMenu {
  display: none;
}

#inputMenu.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input" type="text" placeholder="type something">
<ul id="inputMenu">
  <li>Click me to set text 1</li>
  <li>Click me to set text 2</li>
  <li>Click me to set text 3</li>
  <li>Click me to set text 4</li>
</ul>

致谢：

此答案最初发布于here

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script>
</head>
<body>
    <ul id="inputMenu">
        <li>test 1</li>
        <li>test 2</li>
        <li>test 3</li>
        <li>test 4</li>
        <li>test 5</li>
    </ul>
    <input type="text" name="name" id="input">
    <script type="text/javascript">
        $(document).on('click', '#inputMenu li', function (e) {
            $('#input').val($(this).text()).focus();
        });
        $('#input').on('focusout',function(e) {
            let curElem = this;
            $('#inputMenu li:visible').each(function(){
                if($(curElem).val() == $(this).text())
                    $(this).hide()
            });
        });
    </script>
</body>
</html>

【讨论】：