• 46501
  • 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
3212

Загрузка...

Комментарии

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

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

Мысли вслух. Почему казахи перестали общаться с родственниками и ходить в гости?

Мысли вслух. Почему казахи перестали общаться с родственниками и ходить в гости?

Дастархан в те времена был скромен. Не было понятия «сынау» - осуждения кто как живет, какой в доме ремонт и т.д. Пока взрослые обсуждали задержку заработной платы, мы играли в армию, жмурки, строили городки...
socium_kzo
5 дек. 2016 / 15:19
  • 30828
  • 30
Верховный Суд презентовал комментарий к Гражданскому процессуальному кодексу

Верховный Суд презентовал комментарий к Гражданскому процессуальному кодексу

ГПК содержит 505 статей, многие из которых написаны несколько сложным юридическим языком. Однако теперь понять их можно проще и без обращения к юристу.
RuSnake
6 дек. 2016 / 10:31
  • 11049
  • 0
Японец о Казахстане: «Ваши девушки уж сильно себе набивают цену...»

Японец о Казахстане: «Ваши девушки уж сильно себе набивают цену...»

"Мужчины должны у вас тут права качать, ибо их процент в вашей численности населения уступает проценту женщин". Я машинально начала уверять, что у нас в стране таковых не имеется...
Sapientia
5 дек. 2016 / 10:52
  • 10892
  • 71
Известный европейский фотограф показал истинную красоту казашек

Известный европейский фотограф показал истинную красоту казашек

С 26 по 30 ноября в Алматы гостил известный европейский фотограф Ян Маклайн в рамках реализации совместного проекта с Казахстаном. Подробности не уточняются, однако ходят слухи о том, что этот...
Muchacho55
7 дек. 2016 / 18:29
  • 9594
  • 8
Невозвращенцы-болашаковцы должны государству почти 2 млрд тенге. Кто их теперь вернет?

Невозвращенцы-болашаковцы должны государству почти 2 млрд тенге. Кто их теперь вернет?

Как сообщают новостные порталы, в Нью-Йорке нашёлся бывший болашаковец Ержан Еликов, исчезнувший пять лет назад и всё это время не выходивший на связь с родителями. Да-да, это именно он, «тот самый».
openqazaqstan
вчера / 14:31
  • 8529
  • 30
Распил 1 млрд долларов или спасение для Алматы? В 2017-м начнётся строительство БАКАД

Распил 1 млрд долларов или спасение для Алматы? В 2017-м начнётся строительство БАКАД

Конечно, Алматы заслужил эту дорогу. Невзирая на все издержки, которые могут возникнуть. Заслужил и как крупнейший город Казахстана, и как субъект, формирующий своими налогами около четверти всех...
merurg
7 дек. 2016 / 12:35
  • 7504
  • 20
«Лицо дьявола»? Страшный силуэт на стекле – не оправдание водительской безответственности

«Лицо дьявола»? Страшный силуэт на стекле – не оправдание водительской безответственности

Казнет уже которые сутки подряд обсуждает страшную аварию на трассе Астана – Боровое, где сошлись страшные мистические знаки и где из-за банальной человеческой безответственности гибли люди..
openqazaqstan
8 дек. 2016 / 13:14
  • 6758
  • 7
10 причин, по которым я не смогла работать учителем. Не только в зарплате дело, ребята

10 причин, по которым я не смогла работать учителем. Не только в зарплате дело, ребята

Я почти год проработала в школе, и когда уходила оттуда, была самым счастливым человеком в мире. Тот год, честно говоря, я и сейчас вспоминаю с ужасом.
demonica
6 дек. 2016 / 17:21
  • 6478
  • 78
На самом деле дела плохи: казахстанские школьники на 49-м, а не на 12-м месте по математике

На самом деле дела плохи: казахстанские школьники на 49-м, а не на 12-м месте по математике

О том, как масс-медиа раздула миф о казахстанских вундеркидов в розовый воздушный шар, пока его не проколола правда-иголка. Получается, что казахстанские дети не могут применить теорию в практике...
ardakzhurynov
7 дек. 2016 / 0:17
  • 6030
  • 36