Skip to main content

Focusing - focus/blur

Forms / Controls: Focusing - focus/blur

What does it mean to focus on an element?​

View Answer:
Interview Response: When a user clicks on an element or presses the Tab key on the keyboard, it gains focus. An autofocus HTML property focuses on an element by default when the page loads, as well as other methods of gaining focus. Generally, focusing on an element signifies "prepared to take data here," at which point we may run the code to setup the appropriate functionality.

How does blur work concerning a focus event on an element?​

View Answer:
Interview Response: The moment of losing focus results in a blur. When a user clicks someplace else or presses Tab to go to the next form field, there are other means. Losing the focus generally means: “the data gets entered”, so we can run the code to check it or even save it to the server.

Can you explain how focus and blur events work in JavaScript?​

View Answer:
Interview Response: When the element loses focus, the blur event gets called. After the focus event, a popular solution uses a blur handler to verify if a field gets successfully typed. We can hide validation failures by using the handler. Many validations get implemented in modern HTML utilizing input element attributes such as required, pattern, and others. And they are sometimes just what we require. When we need greater flexibility, we may utilize JavaScript. Also, if the updated value is correct, we could transmit it to the server automatically.

Code Example:

<style>
  .invalid {
    border-color: red;
  }
  #error {
    color: red;
  }
</style>

Your email please: <input type="email" id="input" />

<div id="error"></div>

<script>
  input.onblur = function () {
    if (!input.value.includes('@')) {
      // not email
      input.classList.add('invalid');
      error.innerHTML = 'Please enter a correct email.';
    }
  };

  input.onfocus = function () {
    if (this.classList.contains('invalid')) {
      // remove the "error" indication, because the user wants to re-enter something
      this.classList.remove('invalid');
      error.innerHTML = '';
    }
  };
</script>

What is the cause of JavaScript-initiated focus loss?​

View Answer:
Interview Response: A loss of focus can arise for various reasons. One of them is when the visitor navigates away from the page. However, JavaScript itself may be at blame. When an alert attracts attention to itself, the element loses focus (blur event), and when the alert gets dismissed, the focus returns (focus event). When an element gets deleted from the DOM, attention is lost, and if it reinserts, the attention does not return. These features can cause focus/blur handlers to misbehave, triggering when they are not required. The recommended recipe is to use these occurrences with caution. We should avoid generating user-initiated focus loss if we wish to track it.

Is there a way to focus/blur on any element in the DOM?​

View Answer:
Interview Response: Any element becomes focusable if it has tabindex. The value of the attribute is the order number of the element when Tab (or something like that) is used to switch between them.

Technical Response: Many elements do not allow focusing by default. The list varies slightly between browsers, but one thing is always true: focus/blur support is assured for elements with which a visitor may interact: ‹button›, ‹input›, ‹select›, ‹a›, and others. Elements that exist to format something, such as ‹div›, ‹span›, and table>, on the other hand, are unfocusable by default. The method `elem.focus()` does not affect them, and focus/blur events are never triggered. If an element has a tabindex, it becomes focusable. The property's value is the element's order number when Tab (or anything similar) gets used to transition between them.

Code Example:

<!-- Click the first item and press Tab. -->
<ul>
  <li tabindex="1">One</li>
  <li tabindex="0">Zero</li>
  <li tabindex="2">Two</li>
  <li tabindex="-1">Minus one</li>
</ul>

<style>
  li {
    cursor: pointer;
  }
  :focus {
    outline: 1px dashed green;
  }
</style>

Is there a way to focus/blur and ensure bubbling happens?​

View Answer:
Interview Response: Yes, we may take two techniques to ensure bubbling. To begin, there is an amusing historical feature: focus/blur does not bubble up but rather propagates downward during the capture period. Second, there are focusin and focusout events, similar to focus/blur but bubble. It is important to note that they get allocated using 'elem.addEventListener' rather than on‹event›.

Code Example:

<form id="form">
  <input type="text" name="name" value="Name" />
  <input type="text" name="surname" value="Surname" />
</form>

<style>
  .focused {
    outline: 1px solid red;
  }
</style>

<script>
  form.addEventListener('focusin', () => form.classList.add('focused'));
  form.addEventListener('focusout', () => form.classList.remove('focused'));
</script>
note

We must assign them with elem.addEventListener rather than on‹event›.