最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - onkeyup, onkeydown events not firing for SPAN element - Stack Overflow

programmeradmin4浏览0评论

I've defined the following two span elements: 1) element inside a contenteditable div. 2) contenteditable element.

So far, I can't get the onkey events to fire for my first case (). For the second one () which is not inside a contenteditable div, these events fire fine.

Does anybody knows why?

Here's the example code:

<div id='editor' contenteditable>
div contents...
<span id='span1' style="background-color:red"  onkeyup='alert("span1 keyup");' onkeypress='alert("span1 keypress");' onkeydown='alert("span1 keydown");'>Hello</span>
</div>

<span contenteditable id='span2' style="background-color:yellow" onkeyup='alert("span2 keyup");' onkeypress='alert("span2 keypress");' onkeydown='alert("span2 keydown");'>World</span>

/

I've defined the following two span elements: 1) element inside a contenteditable div. 2) contenteditable element.

So far, I can't get the onkey events to fire for my first case (). For the second one () which is not inside a contenteditable div, these events fire fine.

Does anybody knows why?

Here's the example code:

<div id='editor' contenteditable>
div contents...
<span id='span1' style="background-color:red"  onkeyup='alert("span1 keyup");' onkeypress='alert("span1 keypress");' onkeydown='alert("span1 keydown");'>Hello</span>
</div>

<span contenteditable id='span2' style="background-color:yellow" onkeyup='alert("span2 keyup");' onkeypress='alert("span2 keypress");' onkeydown='alert("span2 keydown");'>World</span>

http://jsfiddle/nr9HG/

Share Improve this question asked Sep 16, 2013 at 20:11 AнгелAнгел 1,4293 gold badges19 silver badges33 bronze badges 1
  • 1 I think because span1 is not directly contenteditable so it will not fire any event – Irvin Dominin Commented Sep 16, 2013 at 20:29
Add a ment  | 

3 Answers 3

Reset to default 4

I had the same problem and it seems to work if you put your editable span inside another non-editable span :

<div id="editor" contenteditable="true">div contents...
    <span contenteditable="false>
        <span id='span1' contenteditable="true" style="background-color:red"  onkeyup='alert("span1 keyup");' onkeypress='alert("span1 keypress");' onkeydown='alert("span1 keydown");'>Hello</span>
    </span>
</div>

You will be able to catch keydown/keyup events both on the editor div AND in your span1.

You need the inner span to have the focus to catch keydown events ing from it. Use the DOM method .focus() to do so.

Because the span1 is not a contenteditable so it will not fire any event.

You can set contenteditable on child too, but it will not fired because the wrapping contenteditable div editor catch the events before the inner span, so they are not fired on the child span1.

So you can change your code in:

<div id='editor' contenteditable="false">div contents...
<span id='span1' contenteditable="true" style="background-color:red"  onkeyup='alert("span1 keyup");' onkeypress='alert("span1 keypress");' onkeydown='alert("span1 keydown");'>Hello</span>

</div>
<span contenteditable="true" id='span2' style="background-color:yellow" onkeyup='alert("span2 keyup");' onkeypress='alert("span2 keypress");' onkeydown='alert("span2 keydown");'>World</span>

Demo: http://jsfiddle/IrvinDominin/U8wnK/

Side note: I think it's better to explicit the boolean value of contenteditable in your markup

You could try using the new window.getSelection() API through which you could access the leaf-most node that is part of your current selection. I.e:

<div contenteditable onkeyup="getTarget">
   <span id="1">One</span>
   <span id="2">Two</span>
</div>

JS:

function getTarget(ev) {
   const selection = window.getSelection();
   // assuming your cursor is over "One"
   console.log(selection.baseNode.parentNode) // <span id="1"></span>
}

May or may not meet your requirements.

发布评论

评论列表(0)

  1. 暂无评论