上的一個按鍵刪除整個錨標記在CONTENTEDITABLE DIV

我有以下HTML：上的一個按鍵刪除整個錨標記在CONTENTEDITABLE DIV

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>Document</title> 
    </head> 
    <body> 
     <div id="edit" contenteditable> 
      This is <a href="#">link</a> that is editable. 
     </div> 
    </body> 
</html>

我試圖做的是一個非常簡單的文本編輯器，你可以把鏈接（他們會得到變成通過HTML JS），但是當你打回退在後面或在他們面前刪，我希望它消失在一次（不信刪除錨文本字母）。

一個會如何呢？我的JavaScript的步驟將是某事像這樣：

當按下退格鍵，檢測是否</a>光標之前，如果是這樣的光標之前的部分運行正則表達式，挑選的第一場比賽，並用空格代替它。
相反，如果檢測刪除鍵被按下時，判斷是否是<a ... >在其前面，並刪除它。

我只是不太確定如何把這個代碼並且如果我可以運行正則表達式，讓它識別CONTENTEDITABLE區域中的文本。我想避免任何繁重的外部庫，因爲除此之外，文本編輯器不會做更多的事情。

如果有人想叉my Codepen here it is。感謝您的任何建議。

來源

2016-03-02 user3056783

一個'contenteditable'元素上使用jQuery的'.keydown（）'的作品，至少在Chrome。不確定瀏覽器的兼容性。 keydown處理程序接收事件對象：'e.which'是被按下的鍵。處理事件，檢查密鑰的ID，然後驗證元素的內容。 –

如果你已經有方法下字符串中傳遞和重新分配CONTENTEDITABLE部分的價值，這裏有一個如何構建正則表達式的例子。

var textblock = document.getElementById('edit') 
 

 
function testContent(deletetype) { // deletetype == "delete" || "backspace" 
 
    var txt = textblock.innerHTML.toString().trim(), 
 
    rgxstring = "<a[^<]+<\\/a>", 
 
    rgx 
 

 
    if (deletetype == "delete") { 
 
    rgxstring = "^" + rgxstring 
 
    } else { 
 
    rgxstring += "$" 
 
    } 
 

 
    rgx = new RegExp(rgxstring, "i") 
 

 
    console.log(txt, txt.match(rgx)) 
 

 
    textblock.innerHTML = txt.replace(rgx, "") 
 
} 
 

 
testContent("backspace")

<div id="edit" contenteditable> 
 
    This is <a href="#">link</a> 
 
</div>

來源

2016-03-02 21:18:43 jmcgriz

還有就是要解決這個乾淨的方法：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>Document</title> 
    </head> 
    <body> 
     <div id="edit" contenteditable> 
      This is <a href="#" contenteditable="false">link</a> that is editable. 
     </div> 
    </body> 
</html>

添加CONTENTEDITABLE = 「假」將註冊錨作爲一個整體，而不是逐個字母。

來源

2017-12-06 19:28:32 Frederiek

上的一個按鍵刪除整個錨標記在CONTENTEDITABLE DIV

回答

相關問題