Натискането на клавиша не се задейства само при бутон с етикет за редактиране на съдържание

Използвам маркера contenteditable="true", за да направя съдържанието в определени маркери редактируемо. Мога успешно да редактирам съдържанието във всеки елемент с този маркер, но проблемът възниква, когато се опитам да открия събитието keydown с jQuery.

демонстрация на jsFiddle

Обърнете внимание, че „Hello World“ в елемент на параграф може да се редактира. Текстът на бутона „Аз съм бутон“ също може да се редактира, вътре в елемент на бутон.

Когато въвеждате елемента абзац, keypresses се увеличава за всеки натиснат клавиш. Въпреки това, когато въвеждате елемента бутон, keypresses НЕ се увеличава. Това е моят проблем. Очевидно събитието keydown не се открива вътре в елемента бутон, въпреки че се открива вътре в елемента параграф.

За да демонстрирате, че това не е проблем с начина, по който е написан JS, щракването върху елемент на параграф или бутон ще увеличи брояча clicks.

Въпросът ми е защо събитието keydown не се открива в елемента бутон и какво мога да направя, за да го открия?


person Lukas    schedule 20.08.2013    source източник
comment
Вашата цигулка работи в IE10 и Firefox23, но не и в Chrome 28.0.1500.95 - предполагам проблем с webkit. Наистина, ontenteditable="true" все още не е съвсем зрял.   -  person noseratio    schedule 20.08.2013
comment
А, да, забравих да тествам с други браузъри. Хм, някаква идея за възможно решение за Chrome?   -  person Lukas    schedule 20.08.2013
comment
Без идеи направо от главата... Ако можете да го възпроизведете с чист javascript (без jQuery), може да го докладвате на Google като грешка. В противен случай това би било проблем с jQuery.   -  person noseratio    schedule 20.08.2013
comment
Добре, благодаря, успях да го копирам в JS и ще изпратя доклад за грешка. Ето връзката в случай, че се интересувате jsfiddle.net/bDnAs/2.   -  person Lukas    schedule 20.08.2013
comment
Наистина грешка - браво!   -  person noseratio    schedule 20.08.2013
comment
Не мисля, че вината е само на contenteditable: предполагам, че по-скоро елементите <button> не генерират ключови събития в Chrome.   -  person Tim Down    schedule 20.08.2013


Отговори (1)


Какво ще кажете за това заобикаляне?

JSFiddle: http://jsfiddle.net/vA74w/

Поставяне на съдържание на бутон в span с contenteditable=true

HTML

<button>&nbsp;<span contenteditable='true'>I'm a Button</span>&nbsp;</button>

&nbsp; няма да позволи на потребителя да изтрие бутона.

Трябва да отрежете &nbsp; и span тагове от текста на бутона след завършване на редакцията.

person Sasidhar Vanga    schedule 20.08.2013
comment
Страхотно, хубаво и просто, страхотно решение. Благодаря! - person Lukas; 21.08.2013