Иногда мы хотим выделить весь текст 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