嵌套内容上的键盘事件可编辑（jQuery） [英] Keypress event on nested content editable (jQuery)

问题描述

我有一个CONTENTEDITABLE div，里面的div我有一个CONTENTEDITABLE跨度，我想做的是能够处理内部SPAN的onkeypress事件。

所以，JavaScript代码将是：

  $（function（）
 {
 $（' #someid'）。keypress（function（event）{alert（'test'）;}）; 
}）; 
  

HTML内容将是：

 < div id =mydivcontenteditable =true> 
可编辑如下：< span id =someidcontenteditable =true>一些TEXT< / span> 
< / div> 
  

如果您在浏览器上测试，您将看到您将看不到测试对话框当您按下某个TEXT上的某个键时，我知道问题是在父div中触发事件，所以SPAN不会得到该事件，也因为它没有焦点。所以我希望你的帮助找到一个解决方案。

解决方案

您在问题中发布的确切代码似乎正常只要 http://jsfiddle.net/gaby/TwgkC/3/

测试并使用 FF ， Opera ，< IE> ， p>

只有更改是删除当前表单中的注释创建语法错误。

#someid 需要有焦点才能使按键工作。

如果您希望您的代码将焦点放在元素右侧创建后，使用 .focus（）方法。

 函数AppendSpan（）
 {
 $（'＃mydiv'）。append（'< span id =someidcontenteditable =true>一些TExt< / span>'）; 
 //然后我想处理插入的跨度上的按键事件
 $（'＃someid'）。keypress（function（event）{
 // do something here 
 alert（this.id）; 
}）。focus（）; //将焦点附加到元素一旦你附加它.. 
} 
  

---

更新

处理这种情况的方法（ c $ c>元素嵌套的事实），不知道如果有任何可接受的情况，但在这里它们是..

1. 将新的 contenteditable span换成另一个，设置为 contenteditable =false
   
   （演示： http://jsfiddle.net/gaby/TwgkC/10/ ）


2. make #mydiv 不是 contenteditable 一旦你添加了span ..
   
   （演示： http://jsfiddle.net/gaby/TwgkC/11/ ）

I have a CONTENTEDITABLE div and inside that div I have a CONTENTEDITABLE span, what I want to do is being able to handle the onkeypress event on the inner SPAN.

So, the javascript code would be:

$(function()
{
    $('#someid').keypress(function(event){alert('test');});
});

And the HTML content would be:

<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>

If you test it on a browser you'll see you won't see the 'test' dialog when you press a key over Some TEXT, I know the problem is that the event is being triggered in the parent div, so the SPAN doesn't get the event, also because it doesn't have the focus. So I'd like your help to find a solution for this.

解决方案

The exact code you posted in your question seems to work just fine at http://jsfiddle.net/gaby/TwgkC/3/

Tested and working with FF, Opera, Chrome, Safari, IE8 ..

only change is the removal of the comment which in its current form creates a syntax error.

The #someid need to have focus in order for the keypress to work.
If you want your code to give focus to the element right after creating it, use the .focus() method.

function AppendSpan()
{
    $('#mydiv').append('<span id="someid" contenteditable="true">Some TExt</span>');
    //Then I want to handle the keypress event on the inserted span
    $('#someid').keypress(function(event){
          //do something here
          alert(this.id);
    }).focus();// bring focus to the element once you append it..
}

---

Update

Two ways to handle this (the fact that there are nested contenteditable elements), not sure if any is acceptable for your case but here they are..

1. wrap the new contenteditable span in another one, which is set to have contenteditable="false"
   (demo: http://jsfiddle.net/gaby/TwgkC/10/)
2. make #mydiv to not be contenteditable once you add the span..
   (demo: http://jsfiddle.net/gaby/TwgkC/11/)

这篇关于嵌套内容上的键盘事件可编辑（jQuery）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！