Question

当用户按退格键时，有没有办法删除像span这样的元素？

示例：

我有一个div contenteditable =＆＃34; true＆＃34;。在主div中，我插入多个单词并且还：

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

达成目标：当用户写作时，他可以在列表中选择单词。用户无法通过char删除它。所以＆＃34; readonly＆＃34;按下退格键时删除所有单词。

Readonly适用于Chrome，IE中的错误和Firefox仅使用＆＃34;删除＆＃34;触摸之前删除所有单词。

Answer 1

看看这个demo

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);
      }
    }
});

基本上，当用户按下退格键时，如果可编辑div的光标位置为0，则从DOM中删除最后一个只读。

Answer 2

这是解决方案，在chrome中测试过： https://jsfiddle.net/8y09ngry/1/

// 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;
        }
    }
};

Answer 3

试试这个。

＆＃13;

 $('#mydiv').bind('backspace ', function(event) {
    //console.log(event.keyCode);
    switch(event.8){
       //....your actions for the keys .....
    }
 });
 
 $(function() {
   $('#mydiv').focus();
});

＆＃13;

<div id="mydiv" tabindex="1" >asdf asdf
</div>

＆＃13;

使用退格键删除只读元素

3 个答案: