Locate the preceding element of the same type without considering its parent

Question

Locate the preceding element of the same type without considering its parent

Is there a way to locate the preceding element of a specific type, whether it belongs to the same parent or not?

For instance, I am interested in identifying the prior input[type="text"] element and giving it focus.

Currently, I can target the previous sibling within the same parent, but I would like to refine that to exclusively select input[type="text"] elements and extend it to encompass the previous parent as well.

The answer that follows should utilize vanilla JavaScript exclusively.

document.addEventListener('keydown', function(e) {
  // if backspace is pressed and the input is empty
  if (e.keyCode === 8 && e.target.value.length === 0) {
    // This will set focus to the previous input element
    e.target.previousSibling.previousSibling.focus();
  }
}, false);

<div>
  <input type="text">
  <input type="text">
</div>
<div>
  <input type="text>
  <input type="text">
</div>
<div>
  <input type="text">
  <input type="text">
</div>

javascript html css

Answer 1

Answer №1

To efficiently navigate to the previous input element when using `querySelectorAll`, you can loop through all matching elements and focus on the one preceding the current target. Remember that the result of `querySelectorAll` is in "document order".

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 8 && e.target.value.length === 0) {
    // This should give focus to the previous input element
    var inputs = document.querySelectorAll('input[type="text"]');

    for(let i = 1; i < inputs.length; i++){
        if(inputs[i] == e.target){
            inputs[i-1].focus();
            break;
        }
    }
  }
}, false);

<div>
  <input type="text">
  <input type="text">
</div>
<div>
  <input type="text">
  <input type="text">
</div>
<div>
  <input type="text>
  <input type="text>
</div>

Answer 2

To efficiently navigate to the previous input element when using `querySelectorAll`, you can loop through all matching elements and focus on the one preceding the current target. Remember that the result of `querySelectorAll` is in "document order".

document.addEventListener('keydown', function(e) {
  if (e.keyCode === 8 && e.target.value.length === 0) {
    // This should give focus to the previous input element
    var inputs = document.querySelectorAll('input[type="text"]');

    for(let i = 1; i < inputs.length; i++){
        if(inputs[i] == e.target){
            inputs[i-1].focus();
            break;
        }
    }
  }
}, false);

<div>
  <input type="text">
  <input type="text">
</div>
<div>
  <input type="text">
  <input type="text">
</div>
<div>
  <input type="text>
  <input type="text>
</div>

Answer 3

Answer №2

There is a more efficient way to handle events on specific elements within a document rather than listening to all events occurring on the entire document.

Start by selecting and caching the main element that contains the elements you wish to cycle through.

Then, select and cache all the elements you want to cycle through from the previously selected scope and store them in a list.

Next, iterate through each element in the list using a loop and perform the following steps:

Create an Immediately Invoked Function Expression (IIFE) to establish a new lexical scope for storing the index associated with the current element.
Add an event listener for the 'keydown' event to the element, checking for the backspace key press when the field is empty; if the conditions are met, either focus on the previous element in the list or focus on the last element if the current one is the first.

By utilizing this approach:

You minimize DOM queries (within a specified scope),
You do not need to listen to every keydown event across the entire document,
And you can create an infinite cycling effect from start to finish.

var scope = document.querySelector('.scope');
var inputs = scope.querySelectorAll('input[type="text"]');
for (var i in Object.keys(inputs)) (function(index){
    inputs[i].addEventListener('keydown', function(e){
        if (e.which === 8 && this.value.length === 0) {
            var next = index - 1;
            if (next < 0) next = inputs.length - 1;
            inputs[next].focus();
        }
    }, false);
})(i);

<div class="scope">
    <div><input type="text"><input type="text"></div>
    <div><input type="text"><input type="text"></div>
    <div><input type="text"><input type="text"></div>
</div>

Answer 4

There is a more efficient way to handle events on specific elements within a document rather than listening to all events occurring on the entire document.

Start by selecting and caching the main element that contains the elements you wish to cycle through.

Then, select and cache all the elements you want to cycle through from the previously selected scope and store them in a list.

Next, iterate through each element in the list using a loop and perform the following steps:

Create an Immediately Invoked Function Expression (IIFE) to establish a new lexical scope for storing the index associated with the current element.
Add an event listener for the 'keydown' event to the element, checking for the backspace key press when the field is empty; if the conditions are met, either focus on the previous element in the list or focus on the last element if the current one is the first.

By utilizing this approach:

You minimize DOM queries (within a specified scope),
You do not need to listen to every keydown event across the entire document,
And you can create an infinite cycling effect from start to finish.

var scope = document.querySelector('.scope');
var inputs = scope.querySelectorAll('input[type="text"]');
for (var i in Object.keys(inputs)) (function(index){
    inputs[i].addEventListener('keydown', function(e){
        if (e.which === 8 && this.value.length === 0) {
            var next = index - 1;
            if (next < 0) next = inputs.length - 1;
            inputs[next].focus();
        }
    }, false);
})(i);

<div class="scope">
    <div><input type="text"><input type="text"></div>
    <div><input type="text"><input type="text"></div>
    <div><input type="text"><input type="text"></div>
</div>

Locate the preceding element of the same type without considering its parent

Answer №1

Answer №2

Similar questions

Looking for assistance with implementing touch gestures on an HTML website?

Storing files or Blobs within Json data in Angular/Javascript

Generate a compressed file from a readable source, insert a new document, and transfer the output

Troubleshooting table alignment problem in Internet Explorer 9

Nested Flexbox Elements

How can I stack two appbar components from Material Ui on top of each other without the vertical line separating them?

Ways to modify the color of a selected dropdown in a navigation bar

HTML - various incorrect horizontal alignments

What is the best way to manage a vuex dispatch response?

Tips on efficiently rebinding jQuery events to dynamically loaded content without having to manually do it for each event or class

Ways to display the main image on a blog post

Issues with toggling the menu on Angular 14 using Bootstrap 4.6

When a text is lengthy, the ellipsis (three dots) will not be displayed

What is the method for adding up elements based on their identification numbers?

Firefox having trouble loading ThreeJS

Tips for extracting subdomains from URLs

Matching an element that contains a specific string in JS/CSS

What is the correct way to place an item within a grid layout?

What is the best way to update comments after submitting an AJAX request?

Is it possible to eliminate jitter in Socket.io?