Невозможно печатать внутри довольного пролета ⇐ Html

[Anonymous]

У меня есть родительский довольный div . Внутри этого у меня есть ребенок довольного довольного span элемент. Теперь я хочу, когда мой дивинг пуст, и я нажимаю в Div. Я хочу, чтобы курсор был таким, что контент, который я тип должен был размещать в элементе довольного довольного довольного . Я пробовал ниже код, но все же напечатанный контент поступает как текстовый узел до Span .
html

Код: Выделить всё

ts

Код: Выделить всё

function setCaret() {
var element = document.getElementById("input");
var range = document.createRange();
var node;
node = document.getElementById("first");
range.setStartAfter(node);
var sel = window.getSelection();
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
element.focus();
}

Теперь допустим, я нажимаю внутрь div и ввода "kartik". Результат, который я ищу: < /p>

Код: Выделить всё

Kartik

< /code>
Но я получаю: < /p>

Kartik


< /code>
js fiddle < /p>
Можете ли вы мне помочь? Объект документа, удалив текстовый узел, а затем поместив этот элемент внутреннего Span 

, но я не ищу это решение, потому что в Angular я сталкиваюсь с некоторыми проблемами, когда вручную меняю DOM, а не полагаться на привязку свойств. /p>
Контекст: я буду связывать свойство с массивом элементов в компоненте. У меня будет несколько пролетов разных типов. Если element.type == 'text' , SPAN будет редактируемым. Если element.type == 'Expression' он будет выглядеть несколько иначе и не будет быть редактируемым контентом. Вот почему мне нужно простираться внутри Div. Итак, изначально, когда у меня есть только один элемент по умолчанию в массиве текста типа, я хочу, чтобы содержание, которое я тип, был помещен в пролет, не за его пределами.

Подробнее здесь: https://stackoverflow.com/questions/794 ... table-span