html, body click event except an element which has a focus function
Question
I need to show the options on focussing the input which I am able to achieve using the below jquery
HTML
<div class="form-field select-subject" id="valexp2_subject">
<span class="input-bkg input-bkg-select">
<input type="text" id="subject" name="subject" placeholder="Please select the subject">
</span>
<span class="textfieldRequiredMsg">Your subject is required.</span>
<div class="options">
<ul>
<li><a href="javascript:void(0);">Loremp ipsum</a></li>
<li><a href="javascript:void(0);">Dolor blah</a></li>
<li><a href="javascript:void(0);">Sit amet</a></li>
<li><a href="javascript:void(0);">Consectetur blah </a></li>
<li><a href="javascript:void(0);">Adipiscing elit</a></li>
</ul>
</div>
</div>
jQuery
$(document).ready(function() {
$('.select-subject').each(function() {
$(this).find('input').focus(function() {
$(this).parents('.select-subject').find('.options').fadeIn();
$('html').click(function() {
if ($('.options').is(':visible') {
//hide .options div
}
});
});
});
});
CSS
.options {
display: none;
}
When .options is visible and the user clicks on anywhere in <html> or <body> I need to hide the div. I tried multiple options but it's not going through. Thanks for the help.
1 answers
solution1
1 ACCPTED 2017-04-22 08:53:24
You mean as below, ie when you focus input it hide options and on blur again visible ,
The blur event is sent to an element when it loses focus.
The focus event is sent to an element when it gains focus.
$(document).ready(function() { $('.select-subject').each(function() { $(this).find('input').focus(function() { $(this).parents('.select-subject').find('.options').fadeIn(); }); }); $('.options li').each(function() { $(this).click(function() { var selectValue = $(this).find('a').html(); console.log(selectValue); $(this).parents('.select-subject').find('input').val(selectValue).focus(); $(this).parents('.select-subject').find('.options').fadeOut('fast'); }); }); $("#subject").on("focus",function(){ $(".options").hide(); }); $("#subject").on("blur",function(){ $(".options").show(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-field select-subject" id="valexp2_subject"> <span class="input-bkg input-bkg-select"> <input type="text" id="subject" name="subject" placeholder="Please select the subject"> </span> <span class="textfieldRequiredMsg">Your subject is required.</span> <div class="options"> <ul> <li><a href="javascript:void(0);">Loremp ipsum</a></li> <li><a href="javascript:void(0);">Dolor blah</a></li> <li><a href="javascript:void(0);">Sit amet</a></li> <li><a href="javascript:void(0);">Consectetur blah </a></li> <li><a href="javascript:void(0);">Adipiscing elit</a></li> </ul> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.