只讀元素刪除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

回答

相關問題