Delete/Backspace 키의 기능 변경

Question

삭제 키를 누를 때 선택된 텍스트를 감싸는 함수가 있습니다. 스팬의 클래스는 라인 스루가 빨간색으로 표시되어 '삭제됨'을 나타냅니다.

CSS :

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

자바 스크립트 :

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

이 내가 삭제 키를 누를 때, 자연스럽게 선택한 텍스트를 삭제 만, 여전히 <span> 요소를 생성하는 contenteditable 텍스트입니다. 텍스트가 남아 있지만 여전히 <span>으로 래핑되도록 삭제 키의 기존 기능을 비활성화하는 방법이 있습니까?

Answer 1

e.preventDefault()이 작동해야합니다.

또한 <span> 대신 HTML 요소 <del>을 사용해야하며 클래스가 첨부되어 있어야합니다. 이 테스트 케이스 밖으로

테스트 : 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); 
       } 
      } 
     } 
    });