Ändern der Funktion der Löschtaste

Question

Ich habe eine Funktion, die markierten Text in einem Bereich umschließt, wenn die Löschtaste gedrückt wird. Die Klasse der Spanne ist rot mit einem Zeilenumbruch, um anzuzeigen, dass sie "gelöscht" wurde.

CSS:

 .deleted { 
    text-decoration:line-through; 
    color:red; 
     } 

JavaScript:

$(document).keydown(function(e) { 
     (e) ? keycode = e.keyCode : keycode = event.keyCode; 
     if (keycode == 8 || 46) { 
     var span = document.createElement("span"); 
     span.className = "deleted"; 
     if (window.getSelection) { 
      var sel = window.getSelection(); 
      if (sel.rangeCount) { 
       var range = sel.getRangeAt(0).cloneRange(); 
       range.surroundContents(span); 
       sel.removeAllRanges(); 
       sel.addRange(range); 
       } 
      } 
     } 
    }); 

Dies ist ein contenteditable Text, also wenn ich die Löschtaste drücken, natürlich löscht den markierten Text, sondern schafft noch das <span> Element. Gibt es eine Möglichkeit, die traditionelle Funktion der Lösch-Taste zu deaktivieren, so dass der Text bleibt, aber immer noch mit der <span> umschließt?

Answer 1

e.preventDefault() sollte funktionieren.

Außerdem sollten Sie das <del> HTML-Element anstelle von <span> mit einer Klasse im Anhang verwenden.

-Test aus diesem Testfall: https://jsfiddle.net/jdshq796/

Answer 2

Sie müssen die die Standardaktion des Ereignisses zu stoppen.

Sie müssen e.preventDefault() in Ihren Code einfügen, um sicherzustellen, dass die Standardaktion des Ereignisses nicht ausgelöst wird.

$(document).keydown(function(e) { 
     e.preventDefault(); 
     (e) ? keycode = e.keyCode : keycode = event.keyCode; 
     if (keycode == 8 || 46) { 
     var span = document.createElement("span"); 
     span.className = "deleted"; 
     if (window.getSelection) { 
      var sel = window.getSelection(); 
      if (sel.rangeCount) { 
       var range = sel.getRangeAt(0).cloneRange(); 
       range.surroundContents(span); 
       sel.removeAllRanges(); 
       sel.addRange(range); 
       } 
      } 
     } 
    });