jquery - 仅在带 "contenteditable"标签的按钮上未触发 Keydown

Question

我使用 contenteditable="true" 标签使某些标签中的内容可编辑。我可以成功地编辑带有该标签的任何元素中的内容，但是当我尝试使用 jQuery 检测 keydown 事件时，问题就出现了。

jsFiddle demo

请注意，段落元素中的“Hello World”是可编辑的。按钮文本“我是按钮”在按钮元素内也是可编辑的。

当您输入段落元素时，每按一次键，keypresses 就会递增。但是，当您在按钮元素中键入内容时，按键次数不会递增。这是我的问题。显然，即使在段落元素内检测到 keydown 事件，但在按钮元素内未检测到该事件。

为了证明这不是 JS 编写方式的问题，单击段落或按钮元素都会增加 clicks 计数器。

所以我的问题是，为什么在按钮元素内没有检测到 keydown 事件，我该如何检测它？

Answer 1

这个解决方法怎么样？

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

使用 contenteditable=true 将按钮内容放入 span 中

HTML

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

  不允许用户删除该按钮。

完成编辑后，需要修剪按钮文本中的   和 span 标记。