如何檢測通過鍵盤編輯contenteditable DIV的子元素？

鑑於此HTML代碼：如何檢測通過鍵盤編輯contenteditable DIV的子元素？

<div contenteditable> 
    .... 
    <span> child-element </span> 
    .... 
</div>

當用戶點擊SPAN元素上（爲了把裏面插入符號），然後按下鍵盤上的字符鍵（以編輯文本的SPAN元素的內容），，keypress和keyup事件將被觸發。

但是，這些相應事件對象的target屬性是而不是 SPAN元素，但DIV元素本身。

現場演示：http://jsfiddle.net/UKcMa/

如何確定是否一個SPAN元素中發生的關鍵事件？

來源

2011-07-19 Šime Vidas

這可以通過使用選擇的API來完成：

$('div').keydown(function(e) { 
    if (document.selection) { 
     alert(document.selection.createRange().parentElement().tagName); // IE 
    } else { 
     // everyone else 
     alert(window.getSelection().anchorNode.parentNode.tagName); 
    } 
});

注：上面的例子是簡單的。請參閱下面鏈接的SO帖子，以獲取選擇問題的完整解決方案。

演示：

http://jsfiddle.net/suVdX/

參考文獻：

來源

2011-07-19 19:30:50

謝謝，我敢肯定，有一種類似的方式來做到這一點在IE ... –

@Šime - 更新與IE解決方案。研究這個時，我找到了鏈接的帖子。那裏有更完整的答案。 –

這解決了我的問題。非常感謝'：）' –

使整個div可編輯意味着<span>標記不過是文本內容。如果您只希望span可以編輯，請在跨度本身上設置contentEditable。

來源

2011-07-19 19:34:27 Mrchief

我需要整個DIV可編輯。我使用SPAN元素給某些單詞特定的樣式和行爲... –

如何檢測通過鍵盤編輯contenteditable DIV的子元素？

回答

相關問題