Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.09.2012, 21:42
Новичок на форуме
Отправить личное сообщение для Krjemelik Посмотреть профиль Найти все сообщения от Krjemelik
 
Регистрация: 05.09.2012
Сообщений: 7

Как вставить тег в нужное место div-a
У меня есть <div id="d" contenteditable="true">какой-то текст</div>
И есть кнопка <button onClick="Bold()">Bold</button>
Требуется при нажатии на кнопку (т.е. при вызове функции Bold) вставлять теги <b></b> в то место, этого div-a, где находится курсор
Вот такая сложная задача.
Ответить с цитированием
  #2 (permalink)  
Старый 05.09.2012, 21:58
Server
Отправить личное сообщение для Rootpassword Посмотреть профиль Найти все сообщения от Rootpassword
 
Регистрация: 26.09.2011
Сообщений: 252

Определить элемент под курсором несложно, примеров много.
Единственная сложность-ваш див, если содержит текстовую информацию, например
12345678

то для определения, над каким именно символом расположено, каждый символ должен быть отдельным элементом в DOM, т.е. проходитесь и получаете что-то типа
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span>
Ответить с цитированием
  #3 (permalink)  
Старый 05.09.2012, 22:05
Новичок на форуме
Отправить личное сообщение для Krjemelik Посмотреть профиль Найти все сообщения от Krjemelik
 
Регистрация: 05.09.2012
Сообщений: 7

Сообщение от Rootpassword Посмотреть сообщение
то для определения, над каким именно символом расположено, каждый символ должен быть отдельным элементом в DOM, т.е. проходитесь и получаете что-то типа
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span>
Эх, ты... не, не годится. Этот див потом отправляется на сервер. Получается слишком крутое увеличение трафика... Нужно что-то другое.
Ответить с цитированием
  #4 (permalink)  
Старый 05.09.2012, 22:12
Server
Отправить личное сообщение для Rootpassword Посмотреть профиль Найти все сообщения от Rootpassword
 
Регистрация: 26.09.2011
Сообщений: 252

Перед отправкой структуру дива можно почистить от ненужных вам span-ов.
Ответить с цитированием
  #5 (permalink)  
Старый 05.09.2012, 22:13
Новичок на форуме
Отправить личное сообщение для Krjemelik Посмотреть профиль Найти все сообщения от Krjemelik
 
Регистрация: 05.09.2012
Сообщений: 7

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

Но неужели не существует способа точно определить в каком месте текста в div-e находится курсор?

P.S. Не заметил Вашего предыдущего сообщения
Ответить с цитированием
  #6 (permalink)  
Старый 05.09.2012, 22:18
Server
Отправить личное сообщение для Rootpassword Посмотреть профиль Найти все сообщения от Rootpassword
 
Регистрация: 26.09.2011
Сообщений: 252

Нет, отчего же. Координаты вы можете получить, но и только, эта информация бесполезна. То есть вы не сможете в структуру DOM вставить нужный вам элемент в точку (122,834)
Ответить с цитированием
  #7 (permalink)  
Старый 05.09.2012, 22:21
Новичок на форуме
Отправить личное сообщение для Krjemelik Посмотреть профиль Найти все сообщения от Krjemelik
 
Регистрация: 05.09.2012
Сообщений: 7

Да, похоже, это единственный способ. Еще раз спасибо.
Ответить с цитированием
  #8 (permalink)  
Старый 06.09.2012, 02:49
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,103

Rootpassword, что за бредни?
В нормальных браузерах есть rangeOffset и rangeParent:
<div style="cursor:pointer" onclick = "nextSibling.data += event.rangeParent.data.charAt( event.rangeOffset ) + ', ';">
    <b><i>Такие </i>дела,</b> братюня.
</div>
clicked:

А в осле наверняка есть аналоги.

Если вы чего-то не знаете или не умеете, это совершенно не значит что такого не существует.
Заморочили голову человеку. =(
__________________
29375, 35

Последний раз редактировалось Aetae, 06.09.2012 в 03:03.
Ответить с цитированием
  #9 (permalink)  
Старый 06.09.2012, 07:58
Новичок на форуме
Отправить личное сообщение для Krjemelik Посмотреть профиль Найти все сообщения от Krjemelik
 
Регистрация: 05.09.2012
Сообщений: 7

Aetae, да, для MSIE есть аналог, нашел. Для Хрома и Сафари вроде, тоже есть какие-то костылики. Будем разбираться, спасибо большое.
Ответить с цитированием
  #10 (permalink)  
Старый 06.09.2012, 10:34
Server
Отправить личное сообщение для Rootpassword Посмотреть профиль Найти все сообщения от Rootpassword
 
Регистрация: 26.09.2011
Сообщений: 252

И как, позвольте поинтересоваться, вы будете вставлять новый элемент в произвольное место страницы, если insertBefore хочет ссылку на нод, а пятый текстовый символ нодом не является?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как добавлять строку в таблицу в нужное место? vitorrio Общие вопросы Javascript 3 31.08.2012 21:05
Как очистить все поля в определенном DIV DarkHacker jQuery 15 21.02.2012 09:39
Как менять div на div d4a1 Общие вопросы Javascript 6 09.12.2011 15:04
Как вставить фото в ячейку таблицы с javascript shaman888 Общие вопросы Javascript 0 09.04.2011 22:13
Как считать файл с винта и вставить его в mht-файл ? potkin Общие вопросы Javascript 4 26.08.2008 13:17