Yvision.kzYvision.kz
kk
Разное
Разное
399 773 постов41 подписчиков
Всяко-разно
1
22:47, 23 ноября 2011

Js Вставка текста в элементы страницы в позицию курсора (каретки)

Я в веб разработке по сути новичок, так что сильно не пинать.

Задался проблемой вставки текста в div в позицию курсора (каретки). Может где-то решения были, но пару дней шерстил гугл и ничего толкового не находил! Либо работают с textarea, либо не работало. В общем ничего полезного. Может не там искал, не знаю, но всё же по крупицам сам собрал этот код.

- работает во всех браузерах вроде бы (проверен в Google Chrome 15.0.874.121, Mozilla FireFox 3.6.16, Opera 11, IE 7+ (c тэгами не работает, вставляет как текст));

- применим к куче ходовых тегов с сохранением их стилей;

 

# Работает с применением такого атрибута тэгов как contentEditable. Вкусная штука оказывается. Сделал главным образом для Оперы, иначе вставляет текст в конец содержимого тэга. Ко всему прочему это позволяет делать из любого тэга редактируемое поле, т.е. можно напрямую менять содержимое тэга как в обычном редакторе со вставкой, перемещением текста, правкой и тп.

# Для нахождения позиции каретки для не IE применено свойство anchorOffset. Долго искал эту феньку.

(с) начинал с кода, взятого тут, но остался только IEшный код.

 
Пример работы. Вставляет по клику текст в позицию курсора (каретки) в разных тэгах.
  1. <title>Вставка текста где угодно</title>
  2. <script language="JavaScript">
  3. function insertAtCaret(obj){
  4. var myValue = " some_text with <b><u>tag</u></b> "; //или передавать через параметр. в IE тэги выдаёт как текст
  5. if (document.selection) { //For browsers like IE
  6. obj.focus();
  7. sel = document.selection.createRange();
  8. sel.text = myValue;
  9. obj.focus();
  10. }
  11. else if (window.getSelection) {
  12. caret = window.getSelection().anchorOffset; // тут позиция каретки
  13. txt = obj.innerHTML;
  14. txt = txt.substring(0, caret) + myValue + txt.substring(caret);
  15. obj.innerHTML = txt;
  16. }
  17. else {
  18. obj.innerhtml += myValue;
  19. obj.focus();
  20. };
  21. };
  22. </head>
  23. <body><br>
  24. <div contentEditable="true" onclick="insertAtCaret(this);" style="color: green;">
  25. Небольшой текст для примера.div.
  26. </div><br>
  27. <span contentEditable="true" onclick="insertAtCaret(this);" style="color: red;">
  28. Небольшой текст для примера. span
  29. </span><br>
  30. <p contentEditable="true" onclick="insertAtCaret(this);" style="color: black; border: 1px solid black;">
  31. Небольшой текст для примера. p
  32. </p><br>
  33. <strong contentEditable="true" onclick="insertAtCaret(this);" style="color: grey;">
  34. Небольшой текст для примера. strong
  35. <h1 contentEditable="true" onclick="insertAtCaret(this);" style="color: maroon;">
  36. Небольшой текст для примера. h1
  37. </h1>
  38. </body>
  39. </html>
1
2649
9