修改删除/退格键的功能

Change the function of the Delete/Backspace Key

本文关键字：功能 删除 修改      更新时间：2023-09-26

我有一个函数，当按下删除键时，将选中的文本包装在一个span中。span的类是红色的，带有一条直通线，表示它已被"删除"。"

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文本，所以当我按下delete键时，它自然会删除选中的文本，但仍然会创建<span>元素。是否有办法禁用删除键的传统功能，使文本保留，但仍然与<span>包装?

e.preventDefault()应该可以工作。

另外，你应该使用<del> HTML元素，而不是<span>附加一个类。

测试这个测试用例:https://jsfiddle.net/jdshq796/

您需要停止事件的默认动作。

你需要在你的代码中添加e.p 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);
              }
           } 
        }
     });
相关文章：