ользую contenteditable div в качестве поля ввода для ввода текста и вставки значков с помощью кнопки (небольшие HTML-изображения) в этом тексте.

Пока текст уже, чем поле contenteditable, это нормально.

Как только текст длиннее поля (поэтому он частично скрыт):

когда я ввожу текстовый символ, все тоже хорошо, последний символ автоматически отображается после нажатия клавиши, чтобы вы всегда могли видеть, что вы печатаете. Но когда я ввожу значок с помощью кнопки, то значок там в порядке, но он скрыт, поскольку содержимое поля не перемещается, чтобы сделать вновь введенный значок видимым, пока я не введу другой текстовый символ.

Есть ли какое-либо решение, чтобы последний введенный элемент (текст или 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('<img class="icOn" src="http://www.bmgstuff.com/files/interface/generator_frame/text_blood.png">');
  })
});

[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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contAiner">
  <input class="buttOn" type="button" value="B">
  <div class="contEd" contenteditable="true" spellcheck="false" autocomplete="off"></div>
</div>

ЗдесьjsFiddle

А вот иоригинальная тема Я взял функцию "pasteIcon" из.

PS: я пытался вызвать код клавиши 39 (стрелка вправо) сразу после функции pasteIcon, чтобы имитировать нажатие клавиши, но она просто не работала.