Есть ли способ подписаться на изменения в window.getSelection?

#javascript #webapi

Вопрос:

Мы можем получить диапазон выбора через window.getSelection() . Мне интересно, есть ли способ подписаться на window.getSelection изменения.

Единственный способ, который пришел мне в голову, — это использовать тайм-ауты (что, очевидно, плохо) или подписаться на событие нажатия клавиши мыши каждого пользователя и отслеживать изменения вручную.

ОТВЕТ UPD:Вы можете использовать эту библиотеку, я ее опубликовал, поскольку более подходящих нет: https://github.com/xnimorz/selection-range-enhancer

1. что вы подразумеваете под изменениями подписки?

2. Отслеживать их в режиме реального времени, как и другие события. Ближайший подход — подписаться на событие нажатия клавиши мыши (с флагом захвата) и проверить, изменен ли результат window.getSelection()

Ответ №1:

Используйте onselect событие.

 function logSelection(event) {
  const log = document.getElementById('log');
  const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);
  log.textContent = `You selected: ${selection}`;
}

const textarea = document.querySelector('textarea');
textarea.onselect = logSelection;

 <textarea>Try selecting some text in this element.</textarea>
<p id="log"></p>

Для конкретных случаев, таких как span contenteditable , вы можете сделать полизаполнение:

 function logSelection() {
  const log = document.getElementById('log');
  const selection = window.getSelection();
  log.textContent = `You selected: ${selection}`;
}

const span = document.querySelector('span');

var down = false;
span.onmousedown = () => { down = true };
span.onmouseup = () => { down = false };
span.onmousemove = () => {
  if (down == true) {
    logSelection();
  }
};

 <span contenteditable="true">Try selecting some text in this element.</span>
<p id="log"></p>

1. К сожалению, это работает только с textarea, но его невозможно отследить, например, с помощью contenteditable

2. Я изменил ответ. Проверьте конец 🙂 ^

3. Чтобы создать полный пример, он должен также отслеживать события клавиатуры, поскольку пользователь может использовать SHIFT стрелки (я уже описал это в теме вопроса). Но я вижу, что нет меньших обходных путей

4. Это верно. В идеале он также должен включать события касания для мобильных устройств. Нет лучшего способа сделать это с помощью span.

5. кстати, я опубликовал небольшую библиотеку, которая отвечает моим потребностям: github.com/xnimorz/selection-range-enhancer

Ответ №2:

если я ошибаюсь, вы хотите знать, когда пользователь начнет выбор на странице, вы можете использовать DOM onselectstart.

 document.onselectstart = function() {
  console.log("Selection started!");
};

дополнительная информация MDN

1. onselectstart отлично работает, если пользователь помещает только курсор, но вам все равно придется использовать события мыши для отслеживания диапазона выбора (поскольку он отслеживает только начальную позицию)

2. правильно, но если вы предоставите более подробную информацию в своем вопросе, это упростит понимание и предоставит вам правильный путь. но ваш вопрос неясен.