contentEditable에서 캐리지 리턴에 스팬을 추가하지 않게하는 방법

Question

사용자가 입력하는 특정 텍스트 주위에 span을 감싸기 위해 contenteditable의 내부 html을 수정합니다. 사용자가 줄 바꿈을 만들 때마다 입력란에 입력 한 내용과 동일한 ID 및 스타일을 사용하여 새 줄도 span으로 표시됩니다.

나는 prevent contenteditable mode from creating <span> tags을 보았지만 경우, 그들은 모든 범위를 제거하려고합니다 (또는 적어도 모든 사람들이 그들에게 조언하는 것입니다). 그러나 나는 의도적으로 창조하는 범위가 필요하며, 나는 그것들이 번식되기를 원하지 않는다.

지금 크롬 61을 사용하고 있지만 Chrome, FireFox, Edge, IE 11 또는 Safari에서 이러한 브라우저를 지원해야하므로 문제가 발생하지 않는 솔루션이 필요합니다.

Answer 1

그래서 같이 입력 키의 onKeyDown에의 범위 살인자를 둘 수 있었다 : 정말 사람이 더 우아한 뭔가 생각할 수있는, 그렇게하고 싶지 않아

document.addEventListener('keydown', function(event) { 
    if(event.keycode == 13) { 
     var span = window.getSelection().anchorNode.parentNode; 
     if(span.id === "spanThatShouldntAppearAfterPressingEnter"){ 
      unwrap(span); 
     } 
    } 
}, true); 
function unwrap(el){ 
    var parent = el.parentNode; // get the element's parent node 
    while (el.firstChild){ 
     parent.insertBefore(el.firstChild, el); // move all children out of the element 
    } 
    parent.removeChild(el); // remove the empty element 
} 

를?