Скачать или смотреть How to Use the blur Event on Text Elements in Vanilla JavaScript

Discover how to effectively use the `blur` event on text elements by adding `tabindex` attributes in vanilla JavaScript for better user interaction.
---
This video is based on the question https://stackoverflow.com/q/68352862/ asked by the user 'Daryl' ( https://stackoverflow.com/u/15064011/ ) and on the answer https://stackoverflow.com/a/68353058/ provided by the user 'biberman' ( https://stackoverflow.com/u/15377355/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to use the blur event on text

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Use the blur Event on Text Elements in Vanilla JavaScript

When working with JavaScript, the blur event is often associated with input elements like text fields. But what if you want to apply this same interaction principle to a non-input text element? Is it possible? Yes! In this guide, we will explore how you can make use of the blur event on text elements by leveraging the tabindex attribute.

What is the blur Event?

The blur event is triggered when an element loses focus. This is particularly useful in form validation or to change styles dynamically based on user interaction. Typically, it is associated with inputs and text areas, meaning that when a user clicks outside of them, the event fires off. However, you can also apply this to other HTML elements like paragraphs, headers, or spans—but there’s a trick to it!

Enabling the blur Event on Non-Input Text Elements

Step 1: Understanding tabindex

The tabindex attribute allows you to control the tab order of elements, meaning you can make non-interactive elements focusable. By adding a tabindex to a text element, you can capture focus and blur events just like an input field.

Step 2: Adding the tabindex Attribute

To start, ensure that your text element has a tabindex attribute. This makes the text element focusable. For example, consider this paragraph element:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: JavaScript Implementation

Now that we have our text element set up with tabindex, we will add event listeners for both focus and blur events in our JavaScript code. Here's a simple script that highlights the text in red when it is focused and returns it to its original state when it loses focus (or blurs):

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

Selecting the Element: We use document.getElementById to target our paragraph with the ID test.

Adding the Focus Event: When the paragraph is focused, the text color changes to red, enhancing visual feedback for user interaction.

Adding the Blur Event: Once the paragraph loses focus, the text color reverts to its original state.

Summary

Implementing the blur event on text elements is straightforward when using vanilla JavaScript, provided you add the tabindex attribute. By following the steps outlined, you can enhance user experience by allowing for more interactive and responsive text elements on your web page.

Conclusion

Now that you know how to use the blur event on a standard text element, you can play around with styles and create a more engaging user experience. Experiment with different elements and styles to see how they can contribute to your website's overall interactive design!