• 54654
  • 107
  • 12
Нравится блог?
Подписывайтесь!

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>
Руслан Fors fors
... и тем не менее я не идеален.
24 ноября 2011, 10:47
3506

Loading...

Комментарии

xapon
0
0
В редакторе есть кнопка "код", если пользоваться ей вместо "цитаты", читать будет удобнее :3
fors
0
0
спасибо. подправил. кстати в Опере код не вставляется. пришлось в ИЕ о0 в ИЕ же код копирует с цифрами (
t-sh
0
0
беру свои слова обратно - это оптимальный вариант :) единственное, валидацию не пройдёт html с лишними атрибутами, но если сильно не придираться - работа на твердую пятерку )
fors
0
0
рад ))
а какие аттрибуты валидацию не пройдут?
t-sh
0
0
да что за чёрт.. опять я ошибся.. contenteditable проходит-таки валидацию :) код на пятерку, даже если придираться )
бгага ) ну я уже придрался. в 10й Опере не хотит. думаю вот
а контентэдитбл не зря я ссылку привел показать. древний прием оказывается
Да хорошо все расписал и очень помог мне, но если в элементе в который нужно вставить текст на месте выделения будут другие элементы, то anchorOffset будет показывать позицию курсора относительно того элемента в котором началось выделение, и соответственно не будет правильно работать. Например если будет такой див: [div] тут текст [p] и тут [b]текст[/b][/p][/div] *

Надо доработать код следующим образом:
else if (window.getSelection) {
sel = window.getSelection();
caret = sel.anchorOffset; // тут позиция каретки относительно контейнера в котором началось выделение
txt = sel.anchorNode.nodeValue;
txt = txt.substring(0, caret) + myValue + txt.substring(caret);
sel.anchorNode.nodeValue = txt;
}

* квадратные скобки вместо знаков больше и меньше т.к. редактор их фильтрует
Zuenf
0
0
А еще после sel.anchorNode.nodeValue = txt; нужно поставить:
rng = document.createRange();
rng.setStart(sel.anchorNode, caret+myValue.length);
sel.removeAllRanges();
sel.addRange( rng );
Таким образом каретка после вставки текста окажется после этого текста.
Zuenf
0
0
Точнее вот так надо исправить:
else if (window.getSelection) {
sel = window.getSelection();
caret = sel.anchorOffset; // тут позиция каретки относительно контейнера в котором началось выделение
txt = sel.anchorNode.parentNode.innerHTML;//содержимое родителя узла в котором началось выделение
txt = txt.substring(0, caret) + myValue + txt.substring(caret);
sel.anchorNode.parentNode.innerHTML = txt;
}

Но нормально передвигать каретку на место после вставленного текста, в этом случае не получилось.

Оставьте свой комментарий

Спасибо за открытие блога в Yvision.kz! Чтобы убедиться в отсутствии спама, все комментарии новых пользователей проходят премодерацию. Соблюдение правил нашей блог-платформы ускорит ваш переход в категорию надежных пользователей, не нуждающихся в премодерации. Обязательно прочтите наши правила по указанной ссылке: Правила

Также можно нажать Ctrl+Enter

Популярные посты

«До какой же еще степени унижения должен дойти народ?!»

«До какой же еще степени унижения должен дойти народ?!»

Министерство труда и соцзащиты провело через парламент очередной крайне неоднозначный закон, который может вызвать всплеск недовольства в стране.
openqazaqstan
15 нояб. 2017 / 11:17
  • 28119
  • 19
Самый большой мошенник в стране: об эффективной схеме развода «Казахтелеком»

Самый большой мошенник в стране: об эффективной схеме развода «Казахтелеком»

История о том, как Народный провайдер наваривается на своих клиентах, намерено не отключая услуги, и беря лишние деньги за ненужные и не оказываемые услуги.
ligaspravedlivosti
17 нояб. 2017 / 19:12
  • 24091
  • 182
«Почему я не хочу встречаться с мужчинами-казахами»

«Почему я не хочу встречаться с мужчинами-казахами»

Заранее отпишусь, данный пост не является попыткой оскорбить собственную нацию) Как говорится о вкусах не спорят, каждому свое.
Bonittta
16 нояб. 2017 / 14:28
  • 15108
  • 372
Почему катастрофический отток интеллектуальной элиты не тревожит Астану?

Почему катастрофический отток интеллектуальной элиты не тревожит Астану?

Как сообщает телеканал КТК, только за последние девять месяцев Казахстан покинули 28200 человек, из них почти пять тысяч инженеров, около 2700 экономистов и 1700 учителей.
openqazaqstan
17 нояб. 2017 / 11:00
  • 10893
  • 56
Задержан казахстанец, продававший детей в сексуальное рабство в ОАЭ и Бахрейн

Задержан казахстанец, продававший детей в сексуальное рабство в ОАЭ и Бахрейн

Подтверждаются худшие предположения, циркулирующие в соцсетях. Периодические исчезновения детей в разных регионах Казахстана объясняются не только семейными проблемами и «синими китами».
openqazaqstan
16 нояб. 2017 / 15:46
  • 7665
  • 54
О «топ-30», «топ-50» и прочих понтах можно пока забыть

О «топ-30», «топ-50» и прочих понтах можно пока забыть

В объективности выводов швейцарского банка Credit Suisse усомниться трудно – его экономические рейтинги относятся к самым авторитетным и их явно трудно упрекнуть в предвзятости
openqazaqstan
18 нояб. 2017 / 17:21
  • 6333
  • 83
Российским женщинам нужны казахстанские мужчины?

Российским женщинам нужны казахстанские мужчины?

Отдельные инициативы некоторых российских чиновников вызывают в Казнете приступы просто-таки гомерического ржача. Женщин в регионе – пруд пруди, а вот мужчин, с которыми они могли бы создать семьи, не хватает.
openqazaqstan
14 нояб. 2017 / 15:55
  • 2959
  • 18
Система госинститутов Казахстана напоминает очень дорогое казино

Система госинститутов Казахстана напоминает очень дорогое казино

Сегодня в прессу просочились детали скандальной сделки ЕНПФ с «мусорными» облигациями ТОО «Бузгул Аурум», о которой уже подробно рассказывалось в начале года.
openqazaqstan
15 нояб. 2017 / 16:13
  • 3277
  • 21
Незамужняя женщина после 25 лет – «девальвирующийся актив»?

Незамужняя женщина после 25 лет – «девальвирующийся актив»?

Много блогеров, да и обычных пользователей на разных платформах и в реальной жизни говорят об этом. Некоторые поддерживают давление на девушек, кто-то защищает права девушек в этом вопросе.
Kduarova
15 нояб. 2017 / 19:27