При помощи 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 обязательна!
Оставить комментарий
Вы должны войти, чтобы оставить комментарий.