JavaScript. Подробное руководство, 6-е издание, стр. 228

Стандартный метод

window.getSelection()

возвращает объект

Selection

, описывающий текущий выделенный текст, как последовательность одного или более объектов

Range

. Объекты

Selection

Range

определяют чрезвычайно сложный прикладной интерфейс, который практически не используется и не описывается в этой книге. Наиболее важной и широко реализованной (везде, кроме IE) особенностью объекта

Selection

является его метод

toString(),

который возвращает простое текстовое содержимое выделенной области.

Броузер IE определяет иной прикладной интерфейс, который не описывается в этой книге. Метод

document.selection

возвращает объект, представляющий выделенную область. Метод

createRange()

этого объекта возвращает реализованный только в IE объект

TextRange

, свойство

text

которого содержит выделенный текст.

Прием, подобный приведенному в примере выше, в частности, может пригодиться в букмарклетах (раздел 13.2.5.1) для организации поиска выделенного текста в поисковых системах или на сайте. Так, следующая HTML-ссылка пытается отыскать текущий выделенный фрагмент текста в Википедии. Если поместить в закладку эту ссылку и URL-адрес со спецификатором javascript:, закладка превратится в букмарклет:

<а href="javascript: var q;

 if (window.getSelection)

 q = window.getSelection().toString();

 else

 if (document.selection)

 q = document.selection.createRange().text;

<b>       void window.open('</b><a href="http://ru.wikipedia.org/wiki/'"><b>http://ru.wikipedia.org/wiki/'</b></a><b> + q);&quot;&gt;</b>

 Поиск выделенного текста в Википедии

</а>

В примере выше, выбирающем выделенный текст, есть одна проблема, связанная с несовместимостью. Метод

getSelection()

объекта

Window

не возвращает выделенный текст, если он находится внутри элемента

<input>

или

<textarea>

: он возвращает только тот текст, который выделен в теле самого документа. В то же время свойство

document.selection

, поддерживаемое броузером IE, возвращает текст, выделенный в любом месте в документе.

Чтобы получить текст, выделенный в текстовом поле ввода или в элементе

<textагеа>

, можно использовать следующее решение:

elt.value.substring(elt.selectionStart, elt.selectionEnd);

Свойства

selectionStart

selectionEnd

не поддерживаются в версиях IE8 и ниже.

15.10.4. Редактируемое содержимое

Мы уже познакомились с элементами форм, включая текстовые поля ввода и элементы

textarea

, которые дают пользователям возможность вводить и редактировать простой текст. Вслед за IE все текущие веб-броузеры стали поддерживать простые средства редактирования разметки HTML. Вы можете увидеть их в действии на страницах (например, на страницах блогов, где можно оставлять комментарии), встраивающих редактор форматированного текста с панелью инструментов, содержащей кнопки для выбора стиля отображения шрифта (полужирный, курсив), настройки выравнивания и вставки изображений и ссылок.

Существует два способа включения поддержки возможности редактирования. Можно установить HTML-атрибут

contenteditable

любого тега или установить JavaScript-свойство

contenteditable

соответствующего элемента

Element

, содержимое которого разрешается редактировать. Когда пользователь щелкнет на содержимом внутри этого элемента, появится текстовый курсор и пользователь сможет вводить текст с клавиатуры. Ниже представлен HTML-элемент, создающий область редактирования:

<div id="editor" contenteditable>

 Щелкните здесь, чтобы отредактировать

</div>

Броузеры могут поддерживать автоматическую проверку орфографии для полей форм и элементов с атрибутом

contenteditable

. В броузерах, поддерживающих такую проверку, она может быть включена или выключена по умолчанию. Чтобы явно включить ее, следует добавить атрибут

spellcheck

. А чтобы явно запретить -добавить атрибут

spellcheck=false

(если, например, в элементе

<textarea>

предполагается выводить программный код или другой текст с идентификаторами, отсутствующими в словаре).

Точно так же можно сделать редактируемым весь документ, записав в свойство

designMode

объекта

Document

строку «оп». (Чтобы снова сделать документ доступным только для чтения, достаточно записать в это свойство строку «off».) Свойство

designMode

не имеет соответствующего ему HTML-атрибута. Можно сделать документ доступным для редактирования, поместив его в элемент

<iframe>

, как показано ниже (обратите внимание, что здесь используется функция

onLoad()

из примера 13.5):

<iframe id="editor" src="about:blank"x/iframe> // Пустой фрейм

 <script>