Добавить текст в textarea и input скрипт для сайта

Добавить текст в textarea

Используя скрипт можно при нажатии на ссылку отправить нужный текст или текстовые символы в поле тегов <textarea> и <input> или нескольких полей, сделано описание для применения и демо примеры.

Установка и использование скрипта добавления текста в <textarea> и <input>

Установка скрипта на сайт

Скопируйте скрипт из примера и добавьте на страницу сайта перед закрывающим тегом </body>.

<script>
function insertTag(_obj_name, _tag_start, _tag_end)
{
var area=document.getElementsByName(_obj_name).item(0);
if (document.getSelection)
{
area.value=area.value.substring(0,area.selectionStart)+
_tag_start+
area.value.substring(area.selectionStart, area.selectionEnd)+
_tag_end+
area.value.substring(area.selectionEnd,area.value.length);
}
else
{
var selectedText=document.selection.createRange().text;
if (selectedText!='')
{
var newText=_tag_start+selectedText+_tag_end;
document.selection.createRange().text=newText;
}
}
}
</script>

Настройка скрипта для нескольких полей

Если Вы собираетесь использовать несколько полей <textarea> и <input> Вам потребуется добавить строку с указанным классом.

<script>
function insertTag(_obj_name, _tag_start, _tag_end)
{
var area=document.getElementsByName(_obj_name).item(0);
if (document.getSelection)
{
area.value=area.value.substring(0,area.selectionStart)+
_tag_start+
area.value.substring(area.selectionStart, area.selectionEnd)+
_tag_end+
area.value.substring(area.selectionEnd,area.value.length);
}
else
{
var selectedText=document.selection.createRange().text;
if (selectedText!='')
{
var newText=_tag_start+selectedText+_tag_end;
document.selection.createRange().text=newText;
document.selection.createRange().text2=newText; // Добавленная строка
document.selection.createRange().text3=newText; // Добавленная строка
}
}
}
</script>

Использование ссылки для добавления текста

При нажатии на ссылку указанный текст будет добален в поле <textarea> и <input>.

<a href="javascript:void(0);" onClick="insertTag('text_','Здесь будет Ваш текст',' ');">Название ссылки</a>

Если полей форм <textarea> и <input> несколько, добавьте им имена соответствующие классам установленным в скрипте.

<a href="javascript:void(0);" onClick="insertTag('text_','Здесь будет Ваш текст',' ');">Название ссылки 1</a>
<a href="javascript:void(0);" onClick="insertTag('text2_','Здесь будет Ваш текст 1',' ');">Название ссылки 2</a>
<a href="javascript:void(0);" onClick="insertTag('text3_','Здесь будет Ваш текст 2',' ');">Название ссылки 3</a>

Использование <textarea> и <input> для добавления текста

Теги <textarea> и <input> обязательно должны содержать атрибут name="text_" или с тем именем, которое Вы сами установите.

<textarea name="text_" width="100%" cols="30" rows="3"></textarea>
<input type="text" name="text2_" width="100%" />

Демо скрипта добавления текста в <textarea> и <input>

Варианты добавления текстовых символов в поле <textarea> и форму <input> при нажатии на ссылку, дополнительно предоставлен вариант для применения на сайте с подключенным плагином bootstrap.

Добавления текста в <textarea>

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Добавления текста в <input>

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Добавления текста в <textarea> и <input>

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.

Добавления текста в <textarea> и <input> для сайта bootstrap

В примере добавлены базовые селекторы плагина bootstrap.

Нажмите на значёк Кнопка выполнения кода в редакторе для показа результата.


Рейтинг: 5.0/5 из 1



Добавлено Автор Ник Источник Просмотров Комментариев Теги
07-10-2015 Михаил Меренков aTmpl © 431 0 script, Input, text, textarea