Иногда удобно иметь возможность определять, какой участок текста документа выделен пользователем. Сделать это можно, как показано ниже:
function getSelectedText {
if (window.getSelection) // Функция, определяемая стандартом HTML5
return window.getSelection.toString;
else
if (document.selection) // Прием, характерный для IE.
return document.selection.createRange.text;
}
Стандартный метод
window.getSelection
возвращает объект
Selection
, описывающий текущий выделенный текст, как последовательность одного или более объектов
Range
. Объекты
Selection
и
Range
определяют чрезвычайно сложный прикладной интерфейс, который практически не используется и не описывается в этой книге. Наиболее важной и широко реализованной (везде, кроме IE) особенностью объекта
Selection
является его метод
toString,
который возвращает простое текстовое содержимое выделенной области.
Броузер IE определяет иной прикладной интерфейс, который не описывается в этой книге. Метод
document.selection
возвращает объект, представляющий выделенную область. Метод
createRange
этого объекта возвращает реализованный только в IE объект
TextRange
, свойство
text
которого содержит выделенный текст.
Прием, подобный приведенному в примере выше, в частности, может пригодиться в букмарклетах (раздел 13.2.5.1) для организации поиска выделенного текста в поисковых системах или на сайте. Так, следующая HTML-ссылка пытается отыскать текущий выделенный фрагмент текста в Википедии. Если поместить в закладку эту ссылку и URL-адрес со спецификатором javascript:, закладка превратится в букмарклет:
Мы уже познакомились с элементами форм, включая текстовые поля ввода и элементы
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>
, как показано ниже (обратите внимание, что здесь используется функция