【问题标题】:Keydown Not Triggered Only on Button w/ "contenteditable" TagKeydown 仅在带有“contenteditable”标签的按钮上不触发
【发布时间】:2013-08-20 06:21:18
【问题描述】:

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

jsFiddle demo

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

当您键入段落元素时,keypresses 每按下一个键就会递增。但是,当您键入按钮元素时,keypresses递增。这是我的问题。显然,keydown 事件未在按钮元素内被检测到,即使它在段落元素内被检测到。

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

所以我的问题是,为什么在按钮元素内没有检测到keydown 事件,我该怎么做才能检测到它?

【问题讨论】:

  • 您的小提琴适用于 IE10 和 Firefox23,但不适用于 Chrome 28.0.1500.95 - 我猜是 webkit 问题。确实,ontenteditable="true" 还不够成熟。
  • 啊,是的,忘记用其他浏览器测试了。嗯,你知道 Chrome 的可能修复方法吗?
  • 没有头脑中的想法。如果您可以使用纯 javascript(没有 jQuery)重现它,您可能会将其作为错误报告给 Google。否则,这将是一个 jQuery 问题。
  • 好的,谢谢,我能够在 JS 中复制它,并将提交错误报告。如果你有兴趣的话,这里是链接jsfiddle.net/bDnAs/2
  • 确实是一个错误 - 干得好!

标签: jquery contenteditable


【解决方案1】:

这个变通方法怎么样?

JSFiddlehttp://jsfiddle.net/vA74w/

将按钮内容放入spancontenteditable=true

HTML

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

&amp;nbsp; 不允许用户删除按钮。

完成编辑后需要从按钮文本中修剪&amp;nbsp;span标签。

【讨论】:

  • 很好,很好,很简单,很好的解决方案。谢谢!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多