html插入元素到最后子元素,jquery – 显示最后插入的html元素的Contenteditable

我使用一个contenteditable div作为输入字段来键入一些文本,并通过该文本中的按钮(小html图片)插入图标.

只要文本比可满足的领域更窄,它就没问题了.

一旦文本比字段长(因此它部分隐藏)：

当我输入一个文本字符时,一切都很好,按下键后会自动显示最后一个字符,这样你就可以随时看到你输入的内容了.

但是当我通过按钮输入一个图标时,图标就可以了,但它是隐藏的,因为字段内容不会移动以使新输入的图标可见,直到我输入另一个文本字符.

对此的任何解决方案,以便输入的最后一个元素(文本或html)始终对用户可见？

function pasteIcon(html) {

var sel,range;

if (window.getSelection) {

sel = window.getSelection();

if (sel.getRangeAt && sel.rangeCount) {

range = sel.getRangeAt(0);

range.deleteContents();

var el = document.createElement("div");

el.innerHTML = html;

var frag = document.createDocumentFragment(),node,lastNode;

while ((node = el.firstChild)) {

lastNode = frag.appendChild(node);

}

range.insertNode(frag);

if (lastNode) {

range = range.cloneRange();

range.setStartAfter(lastNode);

range.collapse(true);

sel.removeAllRanges();

sel.addRange(range);

}

}

} else if (document.selection && document.selection.type != "Control") {

document.selection.createRange().pasteIcon(html);

}

}

$(document).ready(function() {

$('.buttOn').click(function() {

$('.contEd').focus();

pasteIcon('');

})

});

[contenteditable="true"] {

display: inline;

white-space: nowrap;

overflow: hidden !important;

text-overflow: inherit;

-webkit-user-select: text !important;

-moz-user-select: text !important;

-ms-user-select: text !important;

user-select: text !important;

}

[contenteditable="true"] br {

display: none;

}

.contAiner {

display: flex;

}

.buttOn {

width: 24px;

height: 24px;

border: none;

background: #666;

color: white;

}

.contEd {

height: 22px;

text-align: center;

width: 100px;

line-height: 23px;

color: black;

font-size: 10.5px;

font-family: arial;

border: 1px solid black;

}

.icOn {

width: 9px;

height: 13px;

top: 1px;

position: relative;

}

PS：我试图触发一个键码39(右箭头),就在pasteIcon函数之后,为了模拟一个按键,但它只是不起作用.