Шрифт:
Поиск выделенного текста в Википедии
</а>
В примере выше, выбирающем выделенный текст, есть одна проблема, связанная с несовместимостью. Метод
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>
onLoad(function { // После загрузки
var editor = document.getElementById("editor"); // найти фрейм документа
editor.contentDocument.designMode = "on"; // и включить режим
}); // редактирования.
</script>
Все текущие броузеры поддерживают свойства
contenteditable
и designMode
. Однако они оказываются плохо совместимыми, когда дело доходит до фактического редактирования. Все броузеры позволяют вставлять и удалять текст и перемещать текстовый курсор с помощью клавиатуры и мыши. Во всех броузерах нажатие клавиши Enter выполняет переход на новую строку, но разные броузеры создают в результате разную разметку. Некоторые начинают новый абзац, другие просто вставляют элемент <Ьг/>.