contenteditable div에 새 요소를 작성한 후 캐럿을 설정하십시오.

Question

요소가있는 contenteditable div가 있습니다. 필자가 원하는 것은 Enter 키를 누를 때 현재 캐럿이있는 요소 바로 다음에 새 단락 태그를 작성하는 것입니다.

http://jsfiddle.net/qcf4d/1/ : I Enter 키를 누르면 내가 단락 태그를 만들 수 있습니다,하지만 난 캐럿이 바로 폐쇄 </P 여기 >

전에 단락 태그의 텍스트 끝에 배치 할 데모입니다

$(document).on('keypress', 'div[contenteditable="true"]', function(event) { 


    //enter key 
    if (event.which == 13) { 
    //insert the paragraph after this element. 
    $(window.getSelection().anchorNode.parentNode).after("<p>cool</p>"); 
    } 

}); 

생각들? jquery focus() 함수가 도움이 될 것이라고 생각합니다.

Answer 1

해결책을 찾았습니다. 당신은 ID로 새로운 단락을 얻고 그 단락의 텍스트의 길이에 캐럿을 설정할 수 있습니다

$(document).on('keypress', 'div[contenteditable="true"]', function(event) { 


//enter key 
if (event.which == 13) { 
    event.preventDefault(); 
    //insert the paragraph after this element. 
    $(window.getSelection().anchorNode.parentNode).after("<p id='newParagraph'>cool</p>"); 

    //set cursor at new position 
    var sel = window.getSelection(); 
    var innerDiv = document.getElementById('newParagraph'); 
    var innerDivText = innerDiv.firstChild; 

    returnFocus = $("#newParagraph").text().length; 
    sel.collapse(innerDivText, returnFocus); 
    innerDiv.parentNode.focus(); 

} 

}); 

http://jsfiddle.net/qcf4d/2/

사람이이 일을보다 효율적으로 (또는 jQuery를) 방법이있는 경우 저에게 알려주세요.

Answer 2

이상한 점이 있습니다 : "멋진"첫 번째 문자는 항상 "id"로 가져 오기 때문에 항상 커서를 가져옵니다. 그 문제를 피하기 위해 나는 추가하기 전에 <p>cool</p> 요소를 만들고, 그 다음 그것을 사용하여 새로운 커서 위치를 찾습니다.

$(document).on('keypress', 'div[contenteditable="true"]', function(event) { 

    if (event.which == 13) { // enter key 
     event.preventDefault(); 

     //insert the paragraph after this element. 
     var innerDiv = $("<p>cool</p>") 
     var sel = window.getSelection() 
     $(sel.anchorNode.parentNode).after(innerDiv); 

     //set cursor at new position 
     sel.collapse(innerDiv[0].firstChild, innerDiv.text().length); 
    }  
}); 

JSFiddle

그리고 노 JQ 버전 :

document.querySelector('div[contenteditable="true"]').addEventListener('keypress', function(event) { 

    if (event.which == 13) { // enter key 
     event.preventDefault(); 

     //insert the paragraph after this element. 
     var innerDiv = document.createElement('p') 
     innerDiv.innerHTML = 'cool' 
     var sel = window.getSelection() 
     var selElem = sel.anchorNode.parentNode 
     selElem.parentNode.insertBefore(innerDiv, selElem.nextSibling) 

     //set cursor at new position 
     sel.collapse(innerDiv.firstChild, innerDiv.textContent.length); 
    } 
}); 

JSFiddle no-jQ