在CONTENTEDITABLE =「真」的div

鎖定元件我有真實用於用戶輸入，當一個按鈕被點擊它顯示的選項來代替某些字的CONTENTEDITABLE DIV。首先剝去所有html，並創建一個可以替換單詞的span元素。這些詞的標記是不同的，我面臨一些問題。在CONTENTEDITABLE =「真」的div

直接在跨度前後單擊並鍵入文本時，文本將與跨度具有相同的標記。在只有跨度的線上添加單詞非常困難。我想通過用 填充跨度來解決這個問題，但看起來有些奇怪。
用戶可以在點擊跨度，並改變它，我寧願有跨度的用戶點擊更改它之前選擇更換或忽略選項。換句話說，它需要被鎖定。我正在考慮通過capturig keyup來完成這個工作，如果它來自一個跨度然後是e.preventDefault（），但編程它有點痛苦。

所以我的問題是：

是否有鎖定在CONTENTEDITABLE span元素的一種簡單的方法，不涉及捕捉關鍵起來的preventDefault（沒試過還和甚至不知道這是否是會工作）？

當點擊或移動光標，旁邊這將是跨度的一部分的跨度並鍵入文字，有沒有辦法不讓它成爲跨度的一部分嗎？使用 填充範圍可能會有效，但當跨度是該行的第一個單詞時，它看起來很奇怪。爲了說明這一點，我已經張貼下面的示例HTML文件：

<!DOCTYPE html> 
<html> 
<head> 
<meta content="text/html; charset=UTF-8" http-equiv="content-type"> 
<title>Example</title> 
</head> 
<body> 
    <div contenteditable="true"></div> 
    <script type="text/javascript"> 
    document.getElementsByTagName("div")[0] 
     .innerHTML="<span style='color:green'>hello</span>" 
    </script> 
</body> 
</html>

來源

2013-05-09 HMR

至於鎖定在CONTENTEDITABLE div元素;我正在使用需要鎖定的跨度，並且它們不會觸發keydown事件，因此如果它是鎖定元素，請在div上設置事件並檢查範圍。

我使用谷歌封庫，以便得到範圍很簡單：

goog.events.listen(document.getElementById("userInput"),//userInput= contenteditable div 
    [goog.events.EventType.KEYDOWN, 
    goog.events.EventType.PASTE], 
    function(e){ 
     if(32<e.keyCode&&e.keyCode<41){//page up,down,home,end and arrow 
      return; 
     } 
     var el=goog.dom.Range.createFromWindow() 
     .getContainerElement(); 
     if(el.className.indexOf("locked")!==-1){ 
      e.preventDefault(); 
     } 
});

我馬上去填充與& NBSP鎖定跨度;如果在元素之前或之後不存在空格，並且在獲得解決方案後將其發佈到此處。

截止了填充的跨度不檢查，因爲多餘的空格以後不會被刪除。看起來很有趣，但最好不要添加文本。

來源

2013-05-14 02:17:58 HMR

標記您的編輯容器CONTENTEDITABLE =「假」裏面的跨度。它將同時解決這兩個問題。

來源

2013-09-14 02:45:01 Yury

謝謝你的回答。這在IE9中不起作用，我可以點擊跨度並更改它。在FF中，我可以按下control + a然後刪除整個內容，這對我的實現來說並不是什麼大問題，但也許其他人不希望看到像這樣被刪除的鎖定內容。 – HMR 2013-09-14 04:44:01

在CONTENTEDITABLE =「真」的div

回答

相關問題