在contenteditable div中的子元素的鍵盤事件？

我有一個div的contenteditable屬性已被設置爲true。我如何讓孩子們迴應鍵盤事件？似乎唯一的辦法是捕捉父div中的事件並通過選擇apis找出孩子。有沒有更好的辦法？更具體地說，我可以將鍵盤事件處理程序附加到子元素嗎？我錯過了什麼嗎？在contenteditable div中的子元素的鍵盤事件？

附加是說明問題的示例代碼。希望代碼中的評論足夠說明問題。

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

來源

2009-06-23 vkd

這是因爲常規跨度和divs不能接收焦點。您可以通過將tabindex屬性添加到標籤或使其可編輯，從而製作正常的跨度或分格。您不希望兒童跨度上的tabindex，因爲這似乎阻止它在IE中可編輯。我打算建議檢查傳遞給keypress處理程序的Event對象的target/srcElement屬性，但是在IE中，這隻會給出對同一個div的引用，而不是子範圍。

所以在回答你的問題時，我不認爲有比使用選擇來檢查字符輸入位置更好的跨瀏覽器解決方案。

來源

2009-08-18 15:09:15

在contenteditable div中的子元素的鍵盤事件？

回答

相關問題