При помощи 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 обязательна!

URI

Html (ЖЖ)

BB-код (Для форумов)

Оставить комментарий

Вы должны войти, чтобы оставить комментарий.