我有一个输入字段。当用户关注该输入时,该输入下方会出现一个无序列表。
当用户单击列表子项之一时,数据将插入到输入中,并且隐藏无序列表。
当前问题
如果用户单击 input ,但未选择任何选项,然后单击文档中的其他位置,则无序列表将保持显示。
如果我缺少某种可以用来解决此问题的事件,我不知道。
$('body').on('focus blur click', '.autocomplete input , .autocomplete ul, .autocomplete li' , function() {
if (event.type === 'focus' && event.target.nodeName == 'INPUT') {
$(this).siblings('ul').show();
} else if ((event.type === 'blur' || event.type === 'click' ) && event.target.nodeName == 'LI') {
$(this).parent('ul').hide();
}
});
$('body').on('click' ,'li' ,function() {
$('#P1_FIRST_NAME').val($(this).attr('data-value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="input__container autocomplete">
<div class="input__label__container">
<label for="P1_FIRST_NAME" tabindex="999">Autocomplete</label>
</div>
<input type="text" id="P1_FIRST_NAME" class="text_field" autocomplete="off" value="">
<ul for="P1_FIRST_NAME" style="display: none;">
<li tabindex="1" data-value="MAD">Madder</li>
<li tabindex="1" data-value="SAD">Sandy</li>
</ul>
</div>
最佳答案
检查这个fiddle
您需要在 html
绑定(bind)点击事件,并在 input
和 ul
级别停止事件传播
$('body').on('focus blur click', '.autocomplete input , .autocomplete ul, .autocomplete li' , function(e) {
if (event.type === 'focus' && event.target.nodeName == 'INPUT') {
$(this).siblings('ul').show();
} else if ((event.type === 'blur' || event.type === 'click' ) && event.target.nodeName == 'LI') {
$(this).parent('ul').hide();
}
e.stopPropagation();
});
$('body').on('click' ,'li' ,function(e) {
$('#P1_FIRST_NAME').val($(this).attr('data-value'));
e.stopPropagation();
});
$("html").click( function(e) {
$('ul').hide();
});
关于javascript - 失去父焦点时隐藏无序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35081667/