CONTENTEDITABLE +全選：火狐將只允許在動態生成的內容

我有在Firefox（其他瀏覽器似乎很好地工作）與含有contenteditable="true"屬性動態地生成的元素的一個問題鍵盤輸入：CONTENTEDITABLE +全選：火狐將只允許在動態生成的內容

如果我selectAll （動態地或者用我的鼠標），Firefox不會允許鍵盤輸入。

請參閱我的jsFiddle Example以供參考。這似乎隻影響Firefox。

$(document).ready(function(){ 
$('.edit').live('dblclick', function() { 
    document.execCommand('selectAll',false,null); 
}); 

$('#live').append('<p class="edit" contenteditable="true">This content is generated. Firefox will not allow keyboard input when "ALL" is selected.</p>'); 
});

編輯： 下面是實際的應用我的工作（原諒塵）：cr8.me/app/ff.html - 我正在想是點擊（雙擊選擇所有文本）一注，類別或計劃標題進行編輯。它適用於任何人嗎？也許這只是我的配置 - 或者糟糕的腳本。第137,572行是相關的。

來源

2011-09-17 Josiah

在Firefox 3.6中適合我。你使用哪個版本？ 6.0？ –

我可以在6.0.2中重現。 – pimvdb

嗯，提供更多的細節，然後（操作系統）:)我檢查了Fx 3.6.22（Win XP）和6.0.2（虛擬機上的Win 7），並且都正常工作。 –

顯然Firefox已經對跨度元素（我假設這是與其他顯示的情況下：內聯元素，雖然我還沒有測試過）與CONTENTEDITABLE問題。問題可以用簡單的來代替跨度來解決。更重要的是，divs可以使用css在其上設置「display：inline」屬性，並且仍然可以正常工作。

查看工作示例：http://jsfiddle.net/6sTJh/5/。帶有標籤「添加越野車」的按鈕動態地添加了一個跨度contenteditable和它不按預期工作，而按鈕「添加工作」追加div contenteditable屬性，它工作得很好。

所以你的應用程序 - 當我用div替換所有contenteditable跨度時，編輯在firefox 3.6和firefox 6.0中工作得很好。

旁註： 至於你的應用程序代碼 - 不要使用相同的ID在多個節點上（就像你用相同的ID上的每一個音符「註標題」做），也可以從各種瀏覽器獲得意想不到的行爲。

通用規則是您可以在一個頁面上只有一個具有給定ID的元素。使用類將多個元素「分組」並稍後選擇它們。

來源

2011-09-23 09:42:20 WTK

+1，很好的答案。我之前在contentEditable上遇到了問題，這與我的問題類似。 – jammypeach

謝謝！並感謝ID提示！ – Josiah

CONTENTEDITABLE +全選：火狐將只允許在動態生成的內容

回答

相關問題