Как вставить текст на место курсора в textarea

Информация о материале
Категория: JavaScript
Просмотров: 13811

 

JavaScript функция для вставки текста туда где находится курсор.

 function insertTextAtCursor(el, text, offset) {
    var val = el.value, endIndex, range, doc = el.ownerDocument;
    if (typeof el.selectionStart == "number"
            && typeof el.selectionEnd == "number") {
        endIndex = el.selectionEnd;
        el.value = val.slice(0, endIndex) + text + val.slice(endIndex);
        el.selectionStart = el.selectionEnd = endIndex + text.length+(offset?offset:0);
    } else if (doc.selection != "undefined" && doc.selection.createRange) {
        el.focus();
        range = doc.selection.createRange();
        range.collapse(false);
        range.text = text;
        range.select();
    }
}

 

использовать очень просто

 insertTextAtCursor(document.getElementById('textareaid'),'Привет');

мне она пригодилась в чате. Когда на ctrl+enter потребовалось вставлять символ переноса. Про всякого рода защиту в чате писать не буду. На блоге, полно подобных материалов. Могу лишь упомянуть, самая надежная защита от спама,  это бан по ip. Как проверить мой ip спросите вы? Ссылку я привел. бан по ip очень тяжело обойти без вливания средств на прокси сервера. Такие средства есть у профессиональных спамером, но как я уже как-то писал, спамит ваш сайт в 99% случаев будут пытаться новички.

Я отвлекся. В чате я сделал так

 var ctrlMode = false;
$(window).keydown(function(e){
	ctrlMode = e.ctrlKey;
}).keyup(function(e){
	ctrlMode = e.ctrlKey ;
});
$('#message').keydown(function(e){
	if( e.which==13 && !ctrlMode ){
		e.preventDefault();
		$(this).closest('form').submit();
		return false;
	}else if( e.which==13 ){
		insertTextAtCursor(document.getElementById('message'),"\n");
	};
});

Если не зажата ctrl то делаем свое дело - отправляем сообщение в чат. Если же она была нажата, то используя функцию insertTextAtCursor вставляем в textarea c id = "message" символ переноса "\n"

Эту функцию можно приспособить для вставки bb кодов. К примеру, если у вас на сайте используются эти коды, то будет удобно над формой для ввода комментария, сделать несколько кнопок code, url и т.д.

Пример:

<input type="button" value="code" onclick="insertTextAtCursor(document.getElementById('message'),'[code][/code]');">

Однако тогда, пользователю придется перемещать курсор в положение между открытием bb кода и его закрытием, чтобы он мог продолжить вставку кода. Выручит нас третий параметр функции: offset.

//перемещаем курсор после вставки на 7 символов влево
insertTextAtCursor(document.getElementById('message'),'[code][/code]',-7);

Как это работает, можете взглянуть на форме комментариев. 

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии  

Dimas
# Dimas 28.03.2015 10:04
Спасибо большое. Функция работает так как и хотелось :)
Единственный момент - это если хочется заменить что-то. Например если перед вставкой элемента что-то в поле textarea уже выделено - то хотелось бы чтобы вставляемый текст заменил то, что было выделено. Это сложно сделать?
Amberalex
# Amberalex 17.06.2016 12:55
Не могли бы вы пояснить работу части функции в блоке else if? Для чего вообще она нужна?
Руслан
# Руслан 20.03.2017 22:13
Спасибо за пример, работает!
Подскажите, пожалуйста, если также необходимо окаймить выделенный текст в textarea в теги, например , что нужно дописать в ваш код?
Заранее признателен!