텍스트가 선택된 경우 줄 바꿈

Question

백 스페이스/삭제 키를 누를 때 강조 표시된 텍스트를 <span>으로 줄이려면 다음 기능을 사용합니다.

$(document).keydown(function(event) { 
 
    var selection = document.getSelection(); 
 
    typoNumber++; 
 
    if (event.keyCode == 8 || event.keyCode == 46) { 
 
    event.preventDefault(); 
 
    var span = document.createElement("span"); 
 
    span.setAttribute('id', 'typo' + typoNumber); 
 
    span.className = "deleted typo"; 
 
    span.setAttribute('contenteditable', 'false'); 
 
    if (window.getSelection) { 
 
     var sel = window.getSelection(); 
 
     if (sel.rangeCount) { 
 
     var range = sel.getRangeAt(0).cloneRange(); 
 
     range.surroundContents(span); 
 
     sel.removeAllRanges(); 
 
     sel.addRange(range); 
 
     } 
 
    } 
 
    } 
 
});

.deleted.typo { 
 
    background: rgba(100,100,100,0.25); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>Here is text to experiment with.</div>

나는 텍스트 만 (나는 빈 <span> 요소의 무리를하지 않도록) 선택이있는 경우 함수가 실행하려는. 나는 다음에 첫 번째 if 문을 변경 시도 :

if (selection !== '' && event.keyCode == 8 || event.keyCode == 46) { 

을하지만, 작동하지 않았다. 어떤 아이디어?

Answer 1

이로 조건을 변경하면이 도움이 될 것입니다

이

if(
    selection.anchorOffset !== selection.focusOffset 
    && 
    (event.keyCode == 8 || event.keyCode == 46) 
) 

가 바이올린 : https://jsfiddle.net/34L49xLr/

Answer 2

getSelection가 실제로 객체 (SelectionObject) 반환 - 당신이 문자열로 그 변환 한 다음에 그 길이를 확인 할 수 있습니다 선택된 텍스트가 있는지 여부를 판별하십시오. 이런 식으로 뭔가 :

// Make sure you're initializing this somewhere; this function expects it defined. 
 
var typoNumber = 0; 
 

 
$(document).keydown(function(event) { 
 
    var selection = document.getSelection(); 
 

 
    // If there's nothing selected, bail out here. 
 
    // If you want to increment typoNumber even with an empty selection, 
 
    // move that line above this block. 
 
    if (selection.toString().length < 1) { 
 
    return; 
 
    } 
 

 
    typoNumber++; 
 
    if (event.keyCode == 8 || event.keyCode == 46) { 
 
    event.preventDefault(); 
 
    var span = document.createElement("span"); 
 
    span.setAttribute('id', 'typo' + typoNumber); 
 
    span.className = "deleted typo"; 
 
    span.setAttribute('contenteditable', 'false'); 
 
    if (window.getSelection) { 
 
     var sel = window.getSelection(); 
 
     if (sel.rangeCount) { 
 
     var range = sel.getRangeAt(0).cloneRange(); 
 
     range.surroundContents(span); 
 
     sel.removeAllRanges(); 
 
     sel.addRange(range); 
 
     } 
 
    } 
 
    } 
 
});

/* so we can see where the spans are... */ 
 
.deleted.typo { 
 
    display: inline-block; 
 
    padding: 3px; 
 
    background: rgba(100,100,100,0.25); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>Here is text to experiment with.</div>

을했다