Иногда мы хотим выделить весь текст div одним щелчком мыши с помощью JavaScript.

В этой статье мы рассмотрим, как выделить весь текст div одним щелчком мыши с помощью JavaScript.

Используйте метод document.body.createTextRange или document.createRange.

Мы можем использовать метод document.body.createTextRange или document.createRange для создания выделения.

Например, если у нас есть следующий HTML:

<div id="selectable">http://example.com/page.htm</div>

Тогда мы можем написать следующий код:

const selectable = document.getElementById('selectable')
selectable.addEventListener('click', () => {
  if (document.selection) { 
    const range = document.body.createTextRange();
    range.moveToElementText(selectable);
    range.select();
  } else if (window.getSelection) {
    const range = document.createRange();
    range.selectNode(selectable);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  }
})

чтобы добавить прослушиватель кликов в div и выделить текст в div, когда мы щелкнем по нему.

Для этого мы вызываем getElementById, чтобы выбрать div.

Затем мы вызываем addEventListener с помощью 'click', чтобы добавить к нему прослушиватель кликов.

В обратном вызове мы вызываем метод documebnt.create.createTextRange, чтобы создать выбор, если document.selection определен.

Это определяется, если код запускается в IE.

Затем мы вызываем moveToElementText, чтобы переместить курсор к текстовому содержимому.

Затем мы вызываем select, чтобы выделить весь текст.

Во всех других браузерах мы вызываем document.createRange, чтобы создать выбор.

Затем мы вызываем selectNode с элементом с содержимым, которое мы хотим создать для выделения.

Затем мы вызываем removeAllRanges, чтобы удалить все существующие выбранные элементы.

И, наконец, мы вызываем addRange с range, чтобы выбрать созданный диапазон выбора.

Теперь, когда мы нажимаем на текст div, текст будет выделен.

Заключение

Мы можем выделить весь текст, щелкнув текст div, создав объект выбора, а затем выделив текст.

Больше контента на plainenglish.io