Javascript 带退格的只读元素删除

当用户按backspace键时，是否有任何方法可以删除像span这样的元素

例如：

我有一个div contenteditable=“true”。 在主div中，我插入了多个单词，并且：

<span readonly style="color:green">text</span>

文本

实现的目标： 当用户写作时，他可以在列表中选择单词。用户无法逐字符删除它。因此，当按下退格键时，“只读”的作用是删除所有单词

Readonly与Chrome、IE和Firefox中的bug配合使用非常好，在删除所有单词之前只需使用“删除”键。

试试这个

$（'#mydiv'）.bind（'backspace'，函数（事件）{
//console.log（event.keyCode）；
开关（事件8）{
//..您对键的操作。。。。。
}
});
$（函数（）{
$（'#mydiv'）.focus（）；
});
asdf asdf
看看这个

基本上，当用户按下backspace键时，如果editable div的光标位置为0，则从DOM中删除最后一个只读项。
以下是在chrome中测试的解决方案：

请不要在这里要求投票/接受，Ankit。如果材料好，那么人们自然会给你好票。
var editableDiv = document.querySelector('div[contenteditable]');
editableDiv.addEventListener('keydown', function (event) {
    if(event.keyCode === 8) {
      var range = window.getSelection().getRangeAt(0);
      if(editableDiv === range.commonAncestorContainer && range.endOffset === 0) {
        // remove the last readonly span
        var container = document.getElementsByClassName('container')[0];
        var lastReadOnlyChild = document.querySelector('span[readonly]');
        container.removeChild(lastReadOnlyChild);
      }
    }
});

// you need to find your editable div, best way is to use id
document.getElementById('holder').onkeydown = function(e) {
    // listen only backspaces, but you can add "Delete" as well 
    if (e.keyCode == 8) { 
        // getting target element, this may looks little different in IE
        var target = window.getSelection().focusNode.parentNode;
        // checking 'readonly' attribute and deleting element
        if (target.getAttribute('readonly') != null) {
            target.parentNode.removeChild(target);
            return false;
        }
    }
};