0

Is it possible to add a class on highlighted elements? For example: If I Select the .block-2, .block-3, .block-4, and press Enter key then all of these blocks should add a new class. I mean I need to get all of these elements on highlight selection when pressed the Enter key.

<div class="root">
  <div class="block-1"> 1st </div>
  <div class="block-2"> 2nd </div>
  <div class="block-3"> 3rd </div>
  <div class="block-4"> 4th </div>
  <div class="block-5"> 5th </div>
</div>

enter image description here

Tahazzot
  • 1,224
  • 6
  • 27

2 Answers2

3

Youll want to use the selections api to do this. You can use containsNode to do the rest, if your are ie9+.

https://developer.mozilla.org/en-US/docs/Web/API/Selection

Assuming you can use containsNode you should just be able to listen to keydown, filter by Enter, and then finaly query the document for the selection and apply classes depending on if the block nodes are contained within the selection.

const $root = document.querySelector('.root');

document.addEventListener('keydown', (e) => {
    if (e.code == "Enter") {
    const selection = document.getSelection();
    console.log(selection)
    for (const $child of $root.children) {
        if (selection.containsNode($child) || $child.contains(selection.anchorNode) || $child.contains(selection.focusNode)) {
        $child.classList.add('selected');
      } else {
        $child.classList.remove('selected');
      }
    }
  }
});

This code was thrown together in about 3 minutes, is sub optimal, and should be reviewed before being used. You can see it in action @ https://jsfiddle.net/z0gh7eck/2/.

Brenden
  • 1,947
  • 1
  • 12
  • 10
0

According to jandy's answer to stackovweflow. There is no event that "text was selected". But you can bind mouseup event to check if there was a selection then add a class.

Sachin Kumar
  • 366
  • 1
  • 6
  • 20