只读元素删除backspace

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

例如：

我有一个div contenteditable =“true”。里面的主要DIV，我插入多个单词，也：

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

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

只读工程与Chrome很好，IE和Firefox中的错误只使用“删除”触摸删除所有的单词。

来源

2016-03-04 Jojoestar

-1

试试这个。

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

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

来源

2016-03-04 13:08:53 Ankit

请不要要求投票/接受在这里，Ankit。如果材料好，那么人们自然会给你很好的选票。 – halfer

看一看这个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); 
     } 
    } 
});

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

来源

2016-03-04 13:23:32

这里是解决方案，在铬中测试： 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; 
     } 
    } 
};

来源

2016-03-04 13:27:23 DimaIT

只读元素删除backspace

回答

相关问题