How can I call a function within HTML tags inside a content editable div?

Question

Why can I call myFunction() onkeyup with this html:

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

But I can't do it using this:

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

In the second, I'm trying to call it only over a specific word, triggered, and I'm not sure what the difference is. Thanks.

Check out the FIDDLE

Answer 1

Try this:

HTML (note that you have to set contenteditable on the span, not the parent paragraph, and it cannot be both):

<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/