Вставка текста в textarea по щелчку мыши

6875

"Однажды в студёную зимнюю пору", - так хотелось бы начать эту статью. Но нет.

Не однажды. Да и не зимой вообще это дело было..

В общем, как-то раз при создании одного проекта возникла необходимость реализовать на сайте функцию вставки текста в <textarea> по щелчку мыши.

"Нафига это вообще нужно?", - спросите вы.

А нужно это затем, что при оформлении заказа на ресурсе в подарок предоставлялась открытка, в которую можно было внести любое свое пожелание. И зачастую, когда клиенты доходили до поля ввода текста, они просто не знали, что туда вписать.

Тогда было решено сделать подсказки: поздравительные тексты - шаблоны, которые можно выбрать из списка и вставить в текстовое поле при помощи простого клика по <input type = "radio">.  А для того, чтобы быстро удалить подсказку, если она не понравится, добавить кнопку, очищающую "под ноль" текстовое поле.

После того, как идея осела и "переварилась" в голове, началась её творческая реализация в жизнь:

      1. Для начала создадим само текстовое поле:
<textarea id="textarea"></textarea>
      2. Отлично. Далее нарисуем кнопку и инпуты, с помощью которых будут переключаться подсказки:
<input type="radio" name="shablon" id="radio_1" onclick="PasteText_1()">
<label for="radio_1">Шаблон 1</label>
<input type="radio" name="shablon" id="radio_2" onclick="PasteText_2()">
<label for="radio_2">Шаблон 2</label>
<input type="radio" name="shablon" id="radio_3" onclick="PasteText_3()">
<label for="radio_3">Шаблон 3</label>
<div class="button" onClick="Clear_area();">Очистить</div>

На  все <input> - ы  "вешаем" событие  onclick="PasteText()", которое и будет вставлять нужный текст по щелчку мыши. К кнопке тоже прикрутим onClick="Clear_area(), которое будет очищать текстовую область.

На этом с разметкой закончено. Дело осталось за малым: прописать стили для кнопки и заскриптовать все это хозяйство, чтобы оно начало работать.

 

      3 . Для начала пишем вот такой простенький скрипт:
<script>
function PasteText_1() {
document.getElementById('textarea').value = "Поздравляю"; // Вставляет текст №1
};
function PasteText_2() {
document.getElementById('textarea').value = "С Днем Рождения"; // Вставляет текст №2
};
function PasteText_3() {
document.getElementById('textarea').value = "Банально, но что уж поделать.."; // Вставляет текст №3
};
function Clear_area(){
document.getElementById('textarea').value = "";  // Очищает текстовое поле
};
</script>
      4.  Далее присваиваем кнопке необходимые стилевые характеристики:
<style>
.button {
border:1px solid black;
padding:3px 10px;
width:80px;
background:rgb(139, 195, 74);
text-align: center}
</style>

Как все это работает, можно посмотреть в демо - файле.
На этом все. Надеюсь, что статья была вам полезной!

ДЕМОСКАЧАТЬ

Добавить комментарий

Ваш адрес email не будет опубликован.

*
code