При помощи JavaScript можно вставлять текст в середину компонента textarea, вместо выделенного текста и даже между ним в виде HTML тэгов.
Сразу необходимо заметить, что код приведенный в данной статье, работает только под IE и его аналогами. Об извращенных способах работы с выделениями фрагментов в других браузерах будет сказано в другой статье.
Вставка текста в середину текста textarea
Код:
< script language=JavaScript> function Insert(Text) { element = document.getElementById("texts"); element.focus(); if (document.selection) { SelectedText = element.document.selection.createRange(); SelectedText.text = Text; } } < /script> < textarea name=texts rows=5 cols=20> Обычный текст < /textarea> Текст: < input type=text name=paste> < input type=button value='Вставить' onclick='Insert(paste.value)'>
Рассмотрен подробней приведенный код.
У нас есть один компонент textarea (имя texts), в котором хранится текст, компонент text (имя paste), текст из которого и будет вставлен в textarea, и кнопка, при нажатии на которую вызывается функция Insert(), в качестве параметра передается значение компонента text.
Функция Insert():
element = document.getElementById('texts')
Присваиваем переменной element все свойства textarea.
element.focus()
Устанавливаем фокус на textarea.
if(document.selection) ...
Проверяем, работает ли выделение (в случае, если браузер не IE, вернет false).
SelectedText = element.document.selection.createRange()
Определяем область выделенного текста. В случае, если текст не выделен, возвращает позицию каретки, где установлен курсор.
SelectedText.text = Text
Присваиваем выделенной области значение Text (значение paste.value).
Вставка HTML тэга выделенного текста textarea
Для того, что бы вставить тэг в середину текста в скрипте необходимо всего навсего заменить строку
SelectedText.text = Text
на
SelectedText.text = "< a href='"+Text+"'>"+SelectedText.text+"< /a>"
В данном случае мы вставляем текст в виде ссылки.
Удаление фрагмента выделенного текста textarea
Еще проще. Вместо SelectedText.text = Text
вставляем SelectedText.text = ''
Постоянные ссылки
При копировании ссылка на TeaM RSN обязательна!
Оставить комментарий
Вы должны войти, чтобы оставить комментарий.