Наверное, многие видели такое на форумах или других сайтах, когда при выделении текста по нажатию на ссылку можно вставить автоматически выделенный текст в поле ввода текста textarea. Возможно, кому-то интересно, как это реализовать. Вот сегодня я и хочу показать несколько примеров, как выделенный текст вставить цитатой в форму. Для начала давайте рассмотрим, что нам необходимо.
1. При выделении текста он автоматичесски запоминается в буфер.
2. По нажатию на ссылку код копируется в форму.
Все просто! Ничего сложного здесь нет, но без javascript нам не обойтись.
Шаг 1
Создадим форму ввода textarea
Код HTML
<textarea cols="45" rows="8" id="txt_msg"></textarea>
<a onmouseover="copy_txt();" href="javascript:paste_txt('txt_msg');">
Вставить цитату</a>
Как вы заметили, я сразу вставил и ссылку на вставку цитаты.
Шаг 2
Создаем javascript для вставки выделенного текста. Можно вставить непосредственно прямо в код страницы или создать отдельный файл соответствующего расширения. Для примера я вставил код в исходник публикации.
Код JAVA
<script language="javascript">
// определяем общую переменную, которая будет содержать
// выделенный текст
var txt_quote="";
function copy_txt() {
txt_quote="";
if (window.getSelection) {
txt_quote = window.getSelection().toString();
} else if (document.getSelection) {
txt_quote = document.getSelection();
} else if (document.selection) {
txt_quote = document.selection.createRange().text;
}
}
function paste_txt(textarea) {
// \n - перевод на новую строку
if (txt_quote=="") {
alert("Для вставки цитаты в новое сообщение \nвыделите нужный текст и нажмите - Вставить цитату");
} else {
document.getElementById(textarea).value += "[цитата]" + txt_quote + "[/цитата]\n";
}
}
</script>
Давайте разберём пример. Как вы видите, в ссылке "Вставить цитату" функция copy_txt()(т.е. скопировать выделенный текст) срабатывает по событию onmouseover, а уже непосредственно вставка paste_txt('txt_msg') происходит по событию href или же можно было бы назначить на событие onclick="paste_txt('txt_msg');". В функцию paste_txt('txt_msg') мы передаем id элементаtextarea - id="txt_msg", для того, чтобы вставлять в этот элемент из javascript выделенный текст.
Почему здесь две функции получения выделенного фрагмента и вставки в текстовое поле? Зачем назначать одну из функций на событие onmouseover? Конечно, можно было сделать javascript-код и в одной функции. Но дело в том, что если назначить на событие onclick одну функцию, которая и скопирует, и вставит текст в поле, то в браузере Opera такой вариант не работает. Возвращается null(пусто).
Данный пример скрипта совместим со всеми браузерами.
Вот на этой ноте сегодня публикацию завершаю, и до новых встреч.