如何停止內容可以在回車中添加跨度

我正在修改contenteditable的內部html，以圍繞用戶輸入的某些文本包裝span。這是非常好的，除了每次用戶創建一個換行符時，新行也會以span的形式出現，它們的編號和樣式與它們剛輸入的範圍相同。如何停止內容可以在回車中添加跨度

我看過prevent contenteditable mode from creating <span> tags，但是在那他們試圖去除所有跨度（或者至少這是每個人都建議他們做的）。然而，我需要我有意創建的跨度，我只是不想讓它們倍增。

我現在使用的是Chrome 61，但我需要的解決方案不會因爲我需要支持這些瀏覽器而導致Chrome，FireFox，Edge，IE 11或Safari出現問題。

來源

2017-10-14 Glen Pierce

你用什麼代碼來包裝跨度的文本？你的代碼可能存在問題嗎？ –

我不認爲這可能。我只是添加一個單一的跨度內部的HTML。當我閱讀html時，我看到單一跨度，然後按Enter鍵，並在新行中看到具有重複屬性的另一個跨度。 –

我可以把一個跨度殺手中的onkeydown像這樣enter鍵：

document.addEventListener('keydown', function(event) { 
    if(event.keycode == 13) { 
     var span = window.getSelection().anchorNode.parentNode; 
     if(span.id === "spanThatShouldntAppearAfterPressingEnter"){ 
      unwrap(span); 
     } 
    } 
}, true); 
function unwrap(el){ 
    var parent = el.parentNode; // get the element's parent node 
    while (el.firstChild){ 
     parent.insertBefore(el.firstChild, el); // move all children out of the element 
    } 
    parent.removeChild(el); // remove the empty element 
}

我真的不希望這樣做，任何人都可以想到的東西更優雅？

來源

2017-10-18 18:39:42

如何停止內容可以在回車中添加跨度

回答

相關問題