更改Delete / Backspace鍵的功能

Question

我有一個功能，當按Delete鍵時，將選定的文本包裝在一個范圍內。 跨度的類別為紅色並帶有直行，以表明它已被“刪除”。

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

這是一個contenteditable文本，所以當我按下刪除鍵，自然它會刪除選定的文本，但仍創造了<span>元素。 有什么方法可以禁用刪除鍵的傳統功能，以便保留文本但仍用<span>包裹嗎？

Answer 1

e.preventDefault()應該可以工作。

另外，應使用<del> HTML元素而不是帶有附加類的<span> 。

測試此測試用例： https : //jsfiddle.net/jdshq796/

Answer 2

您需要停止事件的默認操作。

您需要在代碼中添加e.preventDefault（），以確保不會觸發事件的默認操作。

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