CSE 154 Examples

On Blur Event

Description :

The On Blur event is triggered when a user leaves an input field. The event occurs when an object loses focus. This is most often used with form validation.

Example:

Enter Text:

Write something in the input field and click outside. Since the input tag loses focus, it shoots of the "on-blur" event that is caught by our JS using an event listener which converts the text inputted into upper case. The code for this is provided below:

          
            document.querySelector("input").addEventListener("blur", changeText);

            function changeText() {
              this.value = this.value.toUpperCase(); // the "this" refers to the element that triggered the event
                                                     // which in this case is the input tag.
            }