"Однажды в студёную зимнюю пору", - так хотелось бы начать эту статью. Но нет.
Не однажды. Да и не зимой вообще это дело было..
В общем, как-то раз при создании одного проекта возникла необходимость реализовать на сайте функцию вставки текста в <textarea> по щелчку мыши.
"Нафига это вообще нужно?", - спросите вы.
А нужно это затем, что при оформлении заказа на ресурсе в подарок предоставлялась открытка, в которую можно было внести любое свое пожелание. И зачастую, когда клиенты доходили до поля ввода текста, они просто не знали, что туда вписать.
Тогда было решено сделать подсказки: поздравительные тексты - шаблоны, которые можно выбрать из списка и вставить в текстовое поле при помощи простого клика по <input type = "radio">. А для того, чтобы быстро удалить подсказку, если она не понравится, добавить кнопку, очищающую "под ноль" текстовое поле.
После того, как идея осела и "переварилась" в голове, началась её творческая реализация в жизнь:
<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(), которое будет очищать текстовую область.
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>
.button {
border:1px solid black;
padding:3px 10px;
width:80px;
background:rgb(139, 195, 74);
text-align: center}
</style>
Как все это работает, можно посмотреть в демо - файле.
На этом все. Надеюсь, что статья была вам полезной!