Элемент, в котором была нажата клавиша
 

Имеется элемент (id="edit"). Пользователь может редактировать любое содержимое в нём. Необходимо получить объект в котором была нажата клавиша (например, с id="t1"). srcElement, target выдают объект edit.

<div id="edit" contentEditable="true">
    <div id="t1">текст</div>
    <div id="t2">текст</div>
          ...
</div>

document.getElementById('edit').onkeypress​ = function( e )
{ /* код */ }

Вешать обработчики на каждый элемент не хочется, да и не красиво это.
Надеюсь на помощь, спасибо.

Спасибо за ответ, но видимо я плохо обрисовал ситуацию. Мне необходимо словить не нажатие кнопки мыши, а нажатие клавиши.

Думаю если обрисовать ситуацию будет получше:
Имеется 2 формы, нужно их синхронизировать (в первой добавили букву - добавилась во второй). Ничего лучшего кроме как разбивать на строки и их пересылать в другую форму не придумал.

я тебе правильную ссылку дал-тебе нужен с той страницы this
http://javascript.ru/tutorial/events...-element:-this
или event.target
http://javascript.ru/tutorial/events...nye-s-sobytiem
всего онклик поменять на онпресап. как получить валуе из элемента знаешь,да и параллели между полями проведёшь с лёгкостью.да и какой из эдитов сработал тоже будет просто
Зачем на строки бить ? посылаешь значение валуе из эдита(я понимаю что их несколько) в параллельный.
Здесь в исходном коде вопроса-есть алгоритм обхода и получения значений с одинаковых элементов формы
http://javascript.ru/forum/misc/1496...dioknopki.html

dmitriymar,
C onclick ясное дело работает. Сам был уверен что аналогично и заработают события, связанные с клавишами, но увы: this, event.target выдают именно эдит.

Дело в том, что длина может быть и несколько сотен строк, т.е не самый лучший вариант пересылать всю форму сразу.

Мне нужно получить значение только 1 элемента - тот в котором была нажата клавиша.

Видимо всё же придётся вешать обработчики на все элементы. Жаль, очень жаль.

выборка из http://javascript.ru/tutorial/events...nye-s-sobytiem

-Обработчик стоит только на внешнем диве, но благодаря event.target выводит по клику класс исходного элемента.
-ну а каждому элементу можно присвоить свой класс.каждый элемент имеет свой класс-ну а по нему легко определить id элемента. форму всго если она есть с содержимым в контейнер. ну или просто поля-если форма не используеться

<div id="edit" contentEditable="true">
    <div id="t1"class="one">текст</div>
    <div id="t2" class="two">текст</div>
          ...
</div>

Дело в том, что длина может быть и несколько сотен строк, т.е не самый лучший вариант пересылать всю форму сразу.
эдит-это не форма-это элемент формы.и часть значения из него не возможно сразу получить.

А никто и не спорит. Но нас же не клик интересует =)

А разницы между получением класса и идентификатора нет никакой, в любом случае вначале требуется получить сам объект. Вот тут то как раз и начинаются пляски - в случае событий, связанных с КЛАВИАТУРОЙ, и this и event.target указывает на эдит.
Я всё проверил не один раз, хоть убейте - выдаёт эдит.

Ну, "форма" - было образно, вообще никакой формы не будет.

Если вешать обработчик на каждый элемент, то срабатывать будет всё правильно. Меня же интересует именно обработчик на внешнем div'е.

Я нагнул javascript.ru форум?

странно-а я по чему то взяв код полностью с той страницы http://javascript.ru/tutorial/events...nye-s-sobytiem
всё работает с кнопками клавиатуры

<div class="d1"
  onkeyup="t=event.target||event.srcElement; alert(t.className)"
>
<span class="number">1</span>
    <input type="text" value="34" class="er"/>
  <input type="text" value="35"class="rt" />
<textarea cols="" rows="" class="ty">er</textarea>
<textarea cols="" rows="" class="we">rt</textarea>
</div>

а небольшое изменение (вместо t.className написать t.id) будет показывать id элемента. хотя разницы в данном случае никакой применительно к этой задаче.работает-фф,опера,ие,сафари,хром в других не пробовал
с чего бы это?:)или Matre это опять ты?

Странно, но input \ textarea действительно выдаёт нужное, а вот если писать в span \ div - только элемент, на котором обработчик...

а с div это вообще исходный пример на странице
или контейнером для div используется span?тогда стоит почитать что такое span

Нет, засовыванием блочных контейнеров в потоковые я не занимаюсь. Вопрос то в другом: при contentEditable = true, не удаётся отловить именно элемент (div, ну или span), в котором произошло. Почему же для input, к примеру, получается?

/// зачем это всё? contentEditable = true -это уже HTML5 какой официально вводиться с 2012 года а полная поддержка наверное будет ещё позже всеми браузерами. тотже ие его не полностью поддерживает
используй текстэрии-ничем особо не отличается.

Я в первом посту с этого начал, что используется именно contentEditable. Когда он оффициально вводиться - другой вопрос. Им пользуются и делают это активно. Почему js ведёт по-разному с узлами документа?
В общем ясно, придётся вешать на каждый. Хорошо хоть функции ссылочный тип данных.

dmitriymar,
Большое спасибо за дискуссию, очень быстро откликнулись.

<div id="edit" >
    <div id="t1" contentEditable="true">текст</div>
    <div id="t2" contentEditable="true">текст</div>
          ...
</div>

ну а вот так всё работает
и не работало наверно в исходном варианте -вложенные контейнеры воспринимались как текстовое заполнение-но это предположение

dmitriymar,
Действительно.

Покопаю etherpad - там при наборе текста обновляется идентификатор элемента, в котором идёт набор (magicdomid).

Незачем капать-исправь ошибку и всё. см-пред пост

Это ничем не отличается от того, чтобы вешать обработчики событий. Конечно, скорее всего так и придётся сделать, но всё же это не эталон.

p.s при designMode = 'on' вообще обработчики не срабатывают.

ну как не отличается?обработчик один-для основного контейнера-он отлавливает в каком из вложенных событие произошло.насколько я понимаю в основном есть контейнеры в каких надписи для полей -не редактируемые и поля редактируемые? ну дак разные классы для ред и не ред. если событие в ред элементе(будет видно по классу )то определить ид элемента ,иначе ничего не делать

На самом деле разница действительно небольшая. Обработчик то один, просто на многих элементов, т.е утечек памяти не будет. Но это так. Всё равно решения не гуд.

document.getElementById('edit').onkeypress​ = function( e )-а для чего эта строчка была вообще дана в начале темы?

Я лишь утверждаю, что contentEditable = true для каждого элемента - тот же "некрасивый" метод, как и обработчики на каждом элементе.
Целью то является именно "красивый" вариант - с одним обработчиком, и без лишних атрибутов.

Итак, полазил по исходникам etherPad.. Получают через объект selection.

Тема закрыта, всем спасибо.