键盘事件在CONTENTEDITABLE DIV子元素?(Keyboard events for c

2019-06-23 23:36发布

我是谁CONTENTEDITABLE属性已被设置为true.How我会得到孩子们对键盘事件作出响应一个div? 似乎是唯一的办法是捕捉事件在父DIV,并通过选择的API搞清楚孩子。 有没有更好的办法? 更具体地讲,我可以将键盘事件处理程序的子元素? 我缺少的东西吗?

附件是说明该问题的示例代码。 希望在代码注释足够解释。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<BODY>
<div id="editable" contentEditable='true' style='height: 130px; width: 400px; border-style:solid; border-width:1px'>
    <span id="span1" onkeypress="alert('span1 keypress')">test text 1</span> <!-- does not work -->
    <span id="span2" > test text2</span>
    <span id="span3" onclick="alert('span3 clicked')">test text 3</span>  <!-- this works fine -->
</div>
<!-- Uncomment this to set a keypress handler for span2 programatically. still doesnt work -->
<!--
<script type="text/javascript">
    var span2 = document.getElementById('span2');
    span2.onkeypress=function() {alert('keypressed on ='+this.id)};
</script>
-->

<!-- Uncomment this to enable keyboard events for the whole div. Finding the actual child that the event is happening on requires using the selection api -->
<!--
<script type="text/javascript">
    var editable = document.getElementById('editable');
    editable.onkeypress=function() {alert('key pressed on ='+this.id+';selnode='+getSelection().anchorNode.parentNode.id+',offset='+getSelection().getRangeAt(0).startOffset)};
</script>
-->
</BODY>
</HTML>

Answer 1:

这是因为定期的跨度和div的是不能获得焦点。 您可以通过添加一个进行正常的跨度或股利可聚焦tabindex属性标签,或者通过它进行编辑。 你不想tabindex的子跨度,因为这似乎以防止它被在IE中编辑。 我会建议检查target / srcElement的性能Event传递给对象的keypress处理整个DIV,但在IE这只是给你一个参考同一div而不是孩子跨度。

因此,在回答你的问题,我不相信有比使用选择以检查字符键入了一个更好的跨浏览器解决方案。



文章来源: Keyboard events for child elements in a contenteditable div?