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