カスタムドロップダウンメニューを含む入力があります。メニュー項目をクリックすると、入力の値が項目のテキストに設定されます。また、入力がフォーカスを失ったときにメニューを非表示にします。これにより、メニュー項目をクリックすると入力のフォーカスが失われ、メニュー項目のクリックイベントを実行する前にメニューが非表示になるという問題が発生しました。これを修正するにはどうすればよいですか？
$(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>この問題は、イベントの順序が原因で発生します。使用できるトリックがあります。以前に発生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>クレジット：
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加