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% случаев будут пытаться новички.
Я отвлекся. В чате я сделал так
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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 и т.д.
Пример:
1 | < input type = "button" value = "code" onclick = "insertTextAtCursor(document.getElementById('message'),'[code][/code]');" > |
Однако тогда, пользователю придется перемещать курсор в положение между открытием bb кода и его закрытием, чтобы он мог продолжить вставку кода. Выручит нас третий параметр функции: offset.
//перемещаем курсор после вставки на 7 символов влево insertTextAtCursor(document.getElementById( 'message' ), '[code][/code]' ,-7); |
Как это работает, можете взглянуть на форме комментариев.
Комментарии
Единственный момент - это если хочется заменить что-то. Например если перед вставкой элемента что-то в поле textarea уже выделено - то хотелось бы чтобы вставляемый текст заменил то, что было выделено. Это сложно сделать?
Подскажите, пожалуйста, если также необходимо окаймить выделенный текст в textarea в теги, например , что нужно дописать в ваш код?
Заранее признателен!