logo标签列表

jQuery：当点击特定元素时，防止输入框失去焦点

jquery
6

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

$(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代码，将你的代码转换成可运行的片段吗？ - MTCoster
2
代码片段已添加。 - Settings Menu Hard to Find
2
既然你已经得到了一个很好的答案，我就不再多加一言了。只是简单提醒一下：对于我作为用户来说，使用focus和blur比使用input和focusout更直观。 - MTCoster
2个回答
10
这个问题是由事件顺序引起的。有一个诀窍，你可以使用mousedown事件来替换click事件，因为它会在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>

制作贡献：

本回答最初发布于此处

1
"click" -> "mousedown"，你救了我的一天 ;) - undead10
0
<!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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接