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

Question

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 (justInserted.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; sel.getRangeAt(0).insertNode(node); } } else if (document.selection && document.selection.createRange) { range = document.selection.createRange(); html = (node.nodeType == 3) ? node.data : node.outerHTML; range.pasteHTML(html); } };

and the function that adds the input is this:

this.addInput = function(suggestEntry, query) { var id = suggestEntry.id; var nodeClass = suggestEntry.nodeClass; var uuid = suggestEntry.uuid; var clause = null; if (nodeClass === "Entity"){ clause = new Entity(); clause.uuid = uuid; clause.id = id; clause.text = suggestEntry.text; } var input = clause.toEditorElementHtml(); this.insertNodeAtCursor(input); var rand = Math.floor((Math.random() * 1000000) + 1); input.setAttribute('id', "rand-" + rand); $rootScope.$broadcast("remove:query",query); var autoSizingInputs = $('input[autosize="autosize"]'); var justInserted = $('#rand-' + rand); $compile(autoSizingInputs)($scope); justInserted.focus(); justInserted.click(); // a bit hacky :/ $(justInserted).val($(justInserted).val() + ""); };

hmm.. i haven't tested but i found some useful looking links like: stackoverflow.com/questions/21881509/… and stackoverflow.com/questions/499126/… I'm not sure whether those links are useful in this case but Good luck anyway! — jyrkim
– jyrkim, Commented Jan 25, 2016 at 14:59
Well the first one puts the cursor at the end of the input.. not right after an input.. The second suggestion needs to know the position which works well with plain text but not when html elements are involved like inputs.. — Michail Michailidis
– Michail Michailidis, Commented Jan 25, 2016 at 15:24

ekuusela · Accepted Answer · 2016-01-28 07:19:38Z

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 setCaretAfter(input); } } function setCaretAfter(element) { if (window.getSelection) { var range = document.createRange(); range.setStartAfter(element); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } } // for demonstration purposes document.addEventListener('keyup', function(e) { if (e.which === 16) { // on SHIFT var container = document.querySelector('div[contenteditable]'); setCaretAfterFocusedInput(container); } });

<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 <br><br> <input type="text"><p>text in a paragraph, no whitespace before this</p> <input type="text"> <p>text in a paragraph</p> </div>

nice job :). I assume it is possible to not use Jquery at all right (using document.querySelector("div[contenteditable] input:focus");? I am trying to drop it as a dependency.. Thanks!
@MichailMichailidis, I've edited my answer to have no jquery dependency

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related