Move caret right after input in contenteditable when caret is inside the input at the end of it

- 1 answer


I am having this problem. I am inserting input elements in a contenteditable div. The caret is in the input at the last position. I would like some help how to move the cursor right after that input by executing some function. You will see in my code that I have to click ( to make some resizing happen. If I remove the justInserted.focus() then the caret is always at the start of the contenteditable. I would like to have a function that finds that the caret is in a specific input in the contenteditable and when I call it, it will put the caret right after that specific input. Any help is appreciated :)

My insert at caret looks like this:

this.insertNodeAtCursor = function(node) {

            var sel, range, html;

            function containerIsEditable(selection) {
                return $(selection.anchorNode).parent().hasClass("editable");

            if (window.getSelection) {
                sel = window.getSelection();
                // only if it is a caret otherwise it inserts
                // anywhere!
                if (containerIsEditable(sel) && sel.getRangeAt
                        && sel.rangeCount) {
                    var previousPosition = sel.getRangeAt(0).startOffset;
            else if (document.selection
                    && document.selection.createRange) {
                range = document.selection.createRange();
                html = (node.nodeType == 3) ?
                        : node.outerHTML;



and the function that adds the input is this:

this.addInput = function(suggestEntry, query) {

            var id =;
            var nodeClass = suggestEntry.nodeClass;
            var uuid = suggestEntry.uuid;
            var clause = null;
            if (nodeClass === "Entity"){
                clause = new Entity();
                clause.uuid = uuid;
       = id;
                clause.text = suggestEntry.text;

            var input = clause.toEditorElementHtml();
            var rand = Math.floor((Math.random() * 1000000) + 1);
            input.setAttribute('id', "rand-" + rand);

            var autoSizingInputs = $('input[autosize="autosize"]');
            var justInserted = $('#rand-' + rand);
  ; // a bit hacky :/
            $(justInserted).val($(justInserted).val() + "");




Here's a snippet with a function that moves the caret right after the focused input. I've tested it in Chrome Version 47.0.2526.111 m, Firefox 43.0.4 and IE 11.

function setCaretAfterFocusedInput(container) {    
  var input = container.querySelector('input:focus');
  if (input) {
    container.focus(); // required for firefox

function setCaretAfter(element) {
  if (window.getSelection) {            
    var range = document.createRange();
    var selection = window.getSelection();

// for demonstration purposes
document.addEventListener('keyup', function(e) {
  if (e.which === 16) { // on SHIFT
    var container = document.querySelector('div[contenteditable]');
<p>When an input is focused, press shift to move the caret right after the input.</p>

<div contenteditable>
  <input type="text" value="input1"><input type="text" value="no whitespace before this">
  <br><br>some text<input type="text" value="input3">more text
  <input type="text"><p>text in a paragraph, no whitespace before this</p>
  <input type="text">
  <p>text in a paragraph</p>