Set cursor position after div tag JS

Question

I'm writing a math editor and I have problem with inserting div tag (field for formulas). I want that cursor move to position after inserted div (field) and then user have ability to continue typing without replace cursor manually.

function insert(elem)
{
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    range.deleteContents();
    range.insertNode(elem);
}

function field()
{
    var innerDiv = document.createElement('div');
    innerDiv.contentEditable = 'true';
    innerDiv.style.minHeight = fontSize()+'pt';
    innerDiv.style.minWidth = fontSize()+'pt';

    var div = document.createElement('div');
    div.contentEditable = 'false';
    div.classList.add('boxed');
    div.classList.add('inline');
    div.appendChild(innerDiv);

    insert(div);
}

function fontSize()
{
    var el = document.getElementById("main");
    var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
    var fontSize = parseFloat(style); 
    return fontSize;
}

.boxed {
    margin: 5px;
    border: 2px solid black;
    max-width: calc(100% - 10px);
}

.inline {
    display: inline-block;   
    vertical-align: middle;
    max-width: calc(100% - 10px);
}

<body id="main" spellcheck="false">
  <button onclick="field()">table</button>
  <div id = "mainDiv" contenteditable="true"></div>
</body>

<div  id = 'mainDiv'>     <div>New inserted div </div>     |cursor here|      </div>

Jesse · Answer 1 · 2015-10-01T03:45:33.210

1

This can be accomplished with the focus() method by adding this one line

innerDiv.focus()

This would be added directly after

insert(div);

Here is the full code::

function setEndOfContenteditable(contentEditableElement)
{ /* Tim Down @ http://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity */
    var range,selection;
    if(document.createRange)
    {
        range = document.createRange();
        range.selectNodeContents(contentEditableElement);
        range.collapse(false);
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
    else if(document.selection)//IE 8 and lower
    { 
        range = document.body.createTextRange();
        range.moveToElementText(contentEditableElement);
        range.collapse(false);
        range.select();
    }
}

function insert(elem)
{
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    range.deleteContents();
    range.insertNode(elem);
}

function field()
{
    var innerDiv = document.createElement('div');
    innerDiv.contentEditable = 'true';
    innerDiv.style.minHeight = fontSize()+'pt';
    innerDiv.style.minWidth = fontSize()+'pt';

    var div = document.createElement('div');
    div.contentEditable = 'false';
    div.classList.add('boxed');
    div.classList.add('inline');
    div.appendChild(innerDiv);

    insert(div);
    document.getElementById('mainDiv').focus();
    setEndOfContenteditable(document.getElementById('mainDiv'));
}

function fontSize()
{
    var el = document.getElementById("main");
    var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
    var fontSize = parseFloat(style); 
    return fontSize;
}

.boxed {
    margin: 5px;
    border: 2px solid black;
    max-width: calc(100% - 10px);
}

.inline {
    display: inline-block;   
    vertical-align: middle;
    max-width: calc(100% - 10px);
}

<body id="main" spellcheck="false">
  <button onclick="field()">table</button>
  <div id = "mainDiv" contenteditable="true"></div>
</body>

edited Oct 01 '15 at 03:45

answered Oct 01 '15 at 03:14

Jesse

2,790
1
20
36

Thank you for answering, but in that case after inserting "field" , cursor move in new tag. I want to move cursor after div tag. – Nikita Ermolenko Oct 01 '15 at 03:20
|here| – Nikita Ermolenko Oct 01 '15 at 03:21
I am afraid I do not know what that means. The cursor has to have somewhere to go and does not rest on the page without being inside of some sort of box to type characters into. You may want to reword your question. – Jesse Oct 01 '15 at 03:21
Sorry for my bad English. I write div structures for clarity.

|here|
– Nikita Ermolenko Oct 01 '15 at 03:24
By this diagram, you are wanting it inside the innerDIV, of which it does end up there. `
OuterDIV
INNERDIV

`. In this code the cursor does go inside this INNERDIV. I am sorry if I do not understand. If you like I can delete my answer so it will attract a more suitable response? – Jesse Oct 01 '15 at 03:26
New inserted div
|cursor here| I hope you can understand my problem with changed diagram. – Nikita Ermolenko Oct 01 '15 at 03:32
I think I know what you mean, how is it now? – Jesse Oct 01 '15 at 03:45
Now cursor staying at the same position as before inserting "field". See code snippet. – Nikita Ermolenko Oct 01 '15 at 03:51
I am unable to replicate this. What browser are you using? I am able to insert a box, and keep typing and the text is after the box, like so:: `asdasd[]asdasd[]asd[]asdasd[]asd[]` – Jesse Oct 03 '15 at 03:56

score 0 · Answer 2 · answered Oct 01 '15 at 07:46

I solved this problem. Changed insert method.

function insert(elem)
{  
    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    range.deleteContents();

    var text = document.createTextNode('\u00A0');
    range.insertNode(text);

    text.parentNode.insertBefore(elem, text);

//    move the cursor
    range.setStartAfter(text);
    range.setEndAfter(text); 
    sel.removeAllRanges();
    sel.addRange(range);
}

Set cursor position after div tag JS

2 Answers2