When using a beforeinput of type InputEvent you can query the getTargetRanges() which return an array of static ranges that will be affected by the input event.

What's an example scenario in which getTargetRanges() will return more than one range? Or does it return an array 'just in case' there will be such an event in the future? Reason for asking is that I would like to properly test code that relies on the return value of getTargetRanges().

MDN: https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/getTargetRanges
Spec: https://w3c.github.io/input-events/#overview

---

Playground:

Show code snippet

document.querySelector('div').addEventListener('beforeinput', (event) => {
  console.log(event.inputType, event.getTargetRanges().length);
  if (event.getTargetRanges().length > 1) {
    alert('how?');
  }
})

<div contenteditable>
  <p>Hello world</p>
  <p>This is a tyypo</p>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Multiple selections are one example. E.g. in Firefox, double-click on a word, hold down Ctrl/Command, double-click on another word, backspace.