Skip to main content

Focusing - focus/blur

Forms / Controls: Focusing - focus/blur

What is form focus in JavaScript?​

View Answer:
Interview Response: Form focus refers to an element's state where it's ready to receive user input. For instance, a text field gaining focus allows the user to type into it.

Can you explain the 'focus' event?​

View Answer:
Interview Response: The 'focus' event occurs when an element gets focus. This can be achieved by clicking on an input element or using the tab key to navigate.

How do you set focus on an element in JavaScript?​

View Answer:
Interview Response: To set focus on an element in JavaScript, you use the `focus()` method. For instance, `document.getElementById('myElement').focus();` sets focus on the element with the ID 'myElement'.

Code Example:

Here's an example of how you might set focus on an input element using JavaScript:

// Assume there is an input element with id 'myInput'
var inputElement = document.getElementById('myInput');

// Set focus on the input element
inputElement.focus();

In this example, we first get a reference to an input element using document.getElementById(). We then call focus() on this element, which will cause the browser to give it focus.

How do you remove focus from an element in JavaScript?​

View Answer:
Interview Response: To remove focus from an element in JavaScript, you use the `blur()` method. For example, `document.getElementById('myElement').blur();` removes focus from the element with the ID 'myElement'.

Code Example:

Here's an example of how you might remove focus from an input element using JavaScript:

// Assume there is an input element with id 'myInput'
var inputElement = document.getElementById('myInput');

// Remove focus from the input element
inputElement.blur();

In this example, we first get a reference to an input element using document.getElementById(). We then call blur() on this element, which will cause the browser to remove focus from it.

What are the 'focusin' and 'focusout' events?​

View Answer:
Interview Response: 'focusin' and 'focusout' are events that bubble in the document's hierarchy. They are triggered when an element gains or loses focus, respectively.

What is the difference between 'focus/blur' and 'focusin/focusout' events?​

View Answer:
Interview Response: The main difference is that 'focus/blur' events do not bubble up through the DOM tree, whereas 'focusin/focusout' events do.

What is tab index and how does it relate to form focus?​

View Answer:
Interview Response: The `tabindex` attribute specifies the order in which elements receive focus when the user navigates with the Tab key. Elements with higher `tabindex` are focused before those with a lower index.

Code Example:

Here's a simple example of how you might use the tabindex attribute in a form:

<form>
    <input type="text" name="first" tabindex="2">
    <input type="text" name="second" tabindex="1">
</form>

In this example, despite being first in the source order, the "first" input field will receive focus after the "second" field when the user navigates through the form using the Tab key. This is because "second" has a lower tabindex.

note

Note: Use tabindex sparingly and wisely, because overuse can lead to navigation issues, particularly for keyboard-only and screen reader users. It's generally best to rely on the default tab order unless there's a compelling reason not to.

How can we prevent a form element from getting focus?​

View Answer:
Interview Response: You can prevent a form element from getting focus by setting its 'tabindex' to '-1'. This removes the element from the tab order.

What's the use of the 'autofocus' attribute in forms?​

View Answer:
Interview Response: The 'autofocus' attribute automatically focuses the cursor on a particular form input field when the page loads.

What's the use of the 'autofocus' attribute in forms?​

View Answer:
Interview Response: The 'autofocus' attribute automatically focuses the cursor on a particular form input field when the page loads.

What does it mean to focus on an element?​

View Answer:
Interview Response: Focusing on an element means making it the active element on the page, ready to receive user input, such as text in an input field or a button click.

Technical 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 in relation to a focus event on an element?​

View Answer:
Interview Response: The 'blur' event is triggered when an element loses focus, meaning it's no longer the active element, often due to user interaction like clicking outside it.

Technical 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: In JavaScript, 'focus' and 'blur' events are triggered when an element gains or loses focus, respectively. They're used to handle user interaction with interactive elements like form inputs.

Technical 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: JavaScript-initiated focus loss happens when the 'blur()' method is called on an element, or when 'focus()' is called on a different element.

Technical Response: JavaScript-initiated focus loss can occur due to various reasons such as dynamically changing content that can result in focus loss, especially when the currently focused element is removed or replaced. It can also occur when focus is programmatically set on another element, which moves the focus away from the currently focused element. Focus can be lost when an element that currently has focus is hidden or disabled. JavaScript-triggered navigation can also cause focus loss. Finally, certain JavaScript events, like clicks outside of a focused element or a user interaction, can also cause focus to be moved or lost. Managing these issues often involves careful focus management and ensuring that dynamic content changes don't disrupt focus unnecessarily.

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

View Answer:
Interview Response: Yes, by using the 'focus()' and 'blur()' methods, we can programmatically set or remove focus from almost any element in the DOM.

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›.