javascript - 如何在内容可编辑 div 内的 HTML 标签内调用函数？

Question

为什么我可以用这个 html 调用 myFunction() onkeyup:

<div contenteditable="true" onkeyup="myFunction()" >A function is triggered when the user is pressing a key in the input field.</div>

但我不能用这个来做到这一点:

<div contenteditable="true">A function is <span onkeyup="myFunction()" >triggered</span> when the user is pressing a key in the input field.</div>

在第二个中，我尝试仅通过特定单词“触发”来调用它，但我不确定有什么区别。谢谢。

查看 FIDDLE

Answer 1

试试这个:

HTML(请注意，您必须在跨度上设置 contenteditable，而不是在父段落上设置，并且不能同时设置两者):

<p>A function is <span class="bold" contenteditable="true" onkeyup="myFunction()" >triggered</span> when the user is pressing a key in the input field.</p>

<p contenteditable="true" onkeyup="myFunction()" >A function is triggered when the user is pressing a key in the input field.</p>

<div id='foo'>Not Yet</div>

CSS:

.bold { font-weight: bold; }

fiddle :http://jsfiddle.net/wTy3C/2/