В JavaScript можно программно выделить текст в элементе input
или textarea
. Вы можете сфокусировать ввод с помощью ipt.focus()
, а затем выбрать его содержимое с помощью ipt.select()
. Вы даже можете выбрать определенный диапазон с помощью ipt.setSelectionRange(from,to)
.
Мой вопрос: есть ли способ сделать это и в contenteditable
элементе?
Я обнаружил, что могу elem.focus()
поместить курсор в contenteditable
элемент, но последующий запуск elem.select()
не работает (и не работает setSelectionRange
). Я ничего не могу найти в сети об этом, но, возможно, я ищу не то ...
Кстати, если это имеет значение, мне нужно только для работы в Google Chrome, так как это для расширения Chrome.
selectElementContents()
вsetTimeout()
или,requestAnimationFrame()
если звонят изonfocus
. См. Jsfiddle.net/rudiedirkx/MgASG/1/showfocus()
.В дополнение к ответу Тима Даунса я сделал решение, которое работает даже в oldIE:
Протестировано в IE 8+, Firefox 3+, Opera 9+ и Chrome 2+. Даже я установил его в плагин jQuery:
... и кто заинтересован, вот то же самое для всех любителей кофе:
Обновить:
Если вы хотите выбрать всю страницу или содержимое редактируемой области (отмеченной значком
contentEditable
), вы можете сделать это намного проще, переключившись наdesignMode
и используяdocument.execCommand
:В MDN есть хорошая отправная точка и немного документации .
(хорошо работает в IE6 +, Opera 9+, Firefoy 3+, Chrome 2+) http://caniuse.com/#search=execCommand
источник
Поскольку все существующие ответы относятся к
div
элементам, я объясню, как это сделать с помощьюspan
s.При выборе текстового диапазона в файле
span
. Чтобы иметь возможность передать начальный и конечный индекс текста, вы должны использоватьText
узел, как описано здесь :источник
r.setStart(e.firstChild,0); r.setEnd(e.lastChild,e.lastChild.textContent.length);
конечно, вы должны проверить, что e.firstChild на самом деле не null.<div>
и<span>
элементов. По крайней мере, не так, как вы описываете.Rangy позволяет вам делать этот кросс-браузер с тем же кодом. Rangy - это кросс-браузерная реализация методов DOM для выбора. Это хорошо протестировано и делает это намного менее болезненным. Я отказываюсь прикасаться к довольным без этого.
Вы можете найти здесь:
http://code.google.com/p/rangy/
Имея rangy в своем проекте, вы всегда можете написать это, даже если браузер IE 8 или более ранней версии и имеет совершенно другой собственный API для выбора:
Где contentEditableNode - это узел DOM с атрибутом contenteditable. Вы можете получить его так:
Или, если jQuery уже является частью вашего проекта и вам это удобно:
источник
Современный способ работы такой. Подробнее о MDN
источник
[Обновлено, чтобы исправить ошибку]
Вот пример, адаптированный из этого ответа, который, похоже, хорошо работает в Chrome - выберите диапазон в contenteditable div
HTML это:
источник