CODEWITHSUNDEEP
javascripthtmlcss
Nikita Ermolenko
Nikita Ermolenko

Reputation: 2259

Set cursor position after div tag JS

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>

Upvotes: 2

Views: 374

Answers (2)

Nikita Ermolenko
Nikita Ermolenko

Reputation: 2259

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

Upvotes: 0

Jesse
Jesse

Reputation: 2830

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>

Upvotes: 1

Related Questions