---
title: "Js Вставка текста в элементы страницы в позицию курсора (каретки)"
description: "Я в веб разработке по сути новичок, так что сильно не пинать. Задался проблемой вставки текста в div..."
author: "fors"
published: "2011-11-23T22:47:53+00:00"
modified: "2011-12-03T04:59:22+00:00"
locale: "ru"
canonical_url: "https://yvision.kz/post/js-vstavka-teksta-v-elementy-stranicy-v-poziciyu-kursora-karetki-208238"
markdown_url: "https://yvision.kz/post/js-vstavka-teksta-v-elementy-stranicy-v-poziciyu-kursora-karetki-208238/markdown"
site_name: "Yvision.kz"
---

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

> Я в веб разработке по сути новичок, так что сильно не пинать. Задался проблемой вставки текста в div...

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

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

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

# Работает с применением такого атрибута тэгов как [contentEditable](http://htmlbook.ru/html/attr/contenteditable). Вкусная штука оказывается. Сделал главным образом для Оперы, иначе вставляет текст в конец содержимого тэга. Ко всему прочему это позволяет делать из любого тэга редактируемое поле, т.е. можно напрямую менять содержимое тэга как в обычном редакторе со вставкой, перемещением текста, правкой и тп.

# Для нахождения позиции каретки для не IE применено свойство [anchorOffset](http://2007.fastcoder.ru/articles/?aid=609#demo2). Долго искал эту феньку.

(с) начинал с кода, [взятого тут](http://stackoverflow.com/questions/7842983/change-default-key-action-javascript), но остался только IEшный код.

 

Пример работы. Вставляет по клику текст в позицию курсора (каретки) в разных тэгах.

-

- Вставка текста где угодно

-

- function insertAtCaret(obj){

- var myValue = " some_text with tag "; //или передавать через параметр. в IE тэги выдаёт как текст

- 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();

- };

- };

-

-

-

-

- Небольшой текст для примера.div.

-

-

- Небольшой текст для примера. span

-

-

- Небольшой текст для примера. p

-

-

- Небольшой текст для примера. strong

-

-

- Небольшой текст для примера. h1

-

-

-

---

Source: [https://yvision.kz/post/js-vstavka-teksta-v-elementy-stranicy-v-poziciyu-kursora-karetki-208238](https://yvision.kz/post/js-vstavka-teksta-v-elementy-stranicy-v-poziciyu-kursora-karetki-208238)