Skip to content

Instantly share code, notes, and snippets.

@anubra266
Created June 2, 2021 00:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anubra266/cd23db5c31e4d497e90c05803d76d6a0 to your computer and use it in GitHub Desktop.
Save anubra266/cd23db5c31e4d497e90c05803d76d6a0 to your computer and use it in GitHub Desktop.
Prevent Input loss of focus when clicking a menu item
$(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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment