Article

Introduction: Focus

https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js
Copy to clipboard

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

<script>
$(document).ready(function(){
  XT1
});
</script>
Copy to clipboard
Send to Live Demo

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>

<script>    
$(document).ready(function() {
  XT1
});
</script>
<script>
  
</script>
Copy to clipboard
Press the Run Demo button to execute the scripts above.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Your browser is too small

Resize your browser to be at least 769px wide.