var emailFooter = $('footer#footer input.email');
var emailFooterLength = emailFooter.val().length;
var hiddenCaptcha = $("footer#footer .captcha-hide");
emailFooter.focus( function() {
hiddenCaptcha.css("display","block");
});
emailFooter.blur( function() {
if(emailFooterLength > 0) {
hiddenCaptcha.css("display","block");
}
else if (emailFooterLength == 0) {
hiddenCaptcha.css("display","none");
}
});.captcha-hide {
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<footer id="footer">
<input class='email'>
<div class="captcha-hide">Testing</div>
</footer>Ensuring that the onblur feature triggers when text is entered into the input field is important.
The first if condition within the blur function may not be functioning as expected since it initially sets the value to '0'. The intended behavior is for the CSS to be displayed as block when text is entered and the input field is clicked outside of.
Seeking guidance on how to progress further as I am relatively new to jQuery/Javascript and exploring various online resources to expand my knowledge.