Я в веб разработке по сути новичок, так что сильно не пинать.
Задался проблемой вставки текста в div в позицию курсора (каретки). Может где-то решения были, но пару дней шерстил гугл и ничего толкового не находил! Либо работают с textarea, либо не работало. В общем ничего полезного. Может не там искал, не знаю, но всё же по крупицам сам собрал этот код.
- работает во всех браузерах вроде бы (проверен в Google Chrome 15.0.874.121, Mozilla FireFox 3.6.16, Opera 11, IE 7+ (c тэгами не работает, вставляет как текст));
- применим к куче ходовых тегов с сохранением их стилей;
# Работает с применением такого атрибута тэгов как contentEditable. Вкусная штука оказывается. Сделал главным образом для Оперы, иначе вставляет текст в конец содержимого тэга. Ко всему прочему это позволяет делать из любого тэга редактируемое поле, т.е. можно напрямую менять содержимое тэга как в обычном редакторе со вставкой, перемещением текста, правкой и тп.
# Для нахождения позиции каретки для не IE применено свойство anchorOffset. Долго искал эту феньку.
(с) начинал с кода, взятого тут, но остался только IEшный код.
-
<script language="JavaScript">
-
function insertAtCaret(obj){
-
if (document.selection) { //For browsers like IE
-
obj.focus();
-
sel = document.selection.createRange();
-
sel.text = myValue;
-
obj.focus();
-
}
-
else if (window.getSelection) {
-
caret = window.getSelection().anchorOffset; // тут позиция каретки
-
txt = obj.innerHTML;
-
txt = txt.substring(0, caret) + myValue + txt.substring(caret);
-
obj.innerHTML = txt;
-
}
-
else {
-
obj.innerhtml += myValue;
-
obj.focus();
-
};
-
};
-
</script>
-
</head>
-
<div contentEditable="true" onclick="insertAtCaret(this);" style="color: green;">
-
Небольшой текст для примера.div.
-
<span contentEditable="true" onclick="insertAtCaret(this);" style="color: red;">
-
Небольшой текст для примера. span
-
<p contentEditable="true" onclick="insertAtCaret(this);" style="color: black; border: 1px solid black;">
-
Небольшой текст для примера. p
-
<strong contentEditable="true" onclick="insertAtCaret(this);" style="color: grey;">
-
Небольшой текст для примера. strong
-
<h1 contentEditable="true" onclick="insertAtCaret(this);" style="color: maroon;">
-
Небольшой текст для примера. h1
-
</h1>
-
</body>
-
</html>