Установить курсор После элемента

Question

У меня есть этот код

elementSpan = document.createElement('span').className = 'mainSpan'; 
elementSpan.innerHTML = '<span class="childSpan">A</sapn>'; 
range.insertNode(elementSpan); 
range.setStartAfter(elementSpan); //the problem am having 

Теперь я установить курсор будет после elementSpan после введения его в contenteditable ДИВ, но вместо того, чтобы курсор будет после elementSpan, она идет после того, как текст A, который находится внутри <span class="childSpan">, но я хочу, чтобы это было после elementSpan. Пожалуйста, кто-нибудь знает, как это сделать?

Answer 1

Прошел снова ваш вопрос, это самое близкое, с чем я мог бы работать. Это создает манекен a с   в конце и перемещает курсор мимо него. Как a, так и   важны, как без этих браузеров (Safari, Chrome) заставляют текст набираться внутри последнего элемента из-за некоторых оптимизаций. Код перемещает курсор на следующий элемент, если он уже есть, его можно удалить, удалив if.

Я не являюсь экспертом в области API/интерфейсов диапазона/выбора. С нетерпением ждем других интересных ответов.

elementSpan = document.createElement('span'); 
 
elementSpan.className = 'mainSpan'; 
 
document.getElementById('ce').appendChild(elementSpan); 
 
elementSpan.innerHTML = '<span id="childSpan">Another text</span>'; //the problem am having 
 
setCursorAfterElement(document.getElementById('childSpan')); 
 

 
function setCursorAfterElement(ele) { 
 
    if (!ele.nextElementSibling) { 
 
    var dummyElement = document.createElement('a') 
 
    dummyElement.appendChild(document.createTextNode('\u00A0')) 
 
    ele.parentNode.appendChild(dummyElement) 
 
    } 
 
    var nextElement = ele.nextElementSibling 
 
    nextElement.tabIndex=0 
 
    nextElement.focus() 
 
    var r = document.createRange(); 
 
    r.setStart(nextElement.childNodes[0], 1); 
 
    r.setEnd(nextElement.childNodes[0], 1); 
 

 
    var s = window.getSelection(); 
 
    s.removeAllRanges(); 
 
    s.addRange(r); 
 
    //document.execCommand("delete", false, null); 
 
}

#childSpan { 
 
    border: 1px solid red; 
 
    margin: 0px; 
 
}

<div id="ce" contenteditable="true"> 
 
</div>