Introduction: Focus
The focus event is often used together with blur to achieve sophisticated functionality.
When an input element is being written into, or when a checkbox is clicked, we say that this element has been put into focus. Thus the focus event occurs when an element is put into focus.
Here is a simple example that alerts the user when our email address field is being written into: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex19.js?actionable=true We can write the above code with the on() function like so: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/forms/ex20.js?actionable=true
$(document).ready(function(){
XT1
});
</script>
Live demo
<div id="minidivpage" class="example-live"><h4 class="heading-4">Sign Up form:</h4><h5 class="message">Message Text</h5><div class="w-form"><form id="email-form" name="email-form" data-name="Email Form" method="get" aria-label="Email Form"><label for="email">Email Address</label><input type="email" class="w-input" maxlength="256" name="email-2" data-name="Email 2" placeholder="" id="email" required=""><label for="field">Password:</label><input type="password" class="w-input" maxlength="256" name="field-2" data-name="Field 2" placeholder="Example Text" id="field" required=""></form><div class="w-form-done" tabindex="-1" role="region" aria-label="Email Form success"><div>Thank you! Your submission has been received!</div></div><div class="w-form-fail" tabindex="-1" role="region" aria-label="Email Form failure"><div>Oops! Something went wrong while submitting the form.</div></div></div></div>
$(document).ready(function() {
XT1
});
</script>