Question

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

$(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>

Answer 1

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

$(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

Answer 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>

jQuery：防止在单击特定元素时输入失去焦点

2 个答案: