Установить позицию курсора после тега div JS

Я пишу редактор математики, и у меня проблема с вставкой тега div (поле для формул). Я хочу, чтобы этот курсор переместился в позицию после вставленного div (поле), а затем у пользователя появилась возможность продолжать вводить текст без замены курсора вручную.Установить позицию курсора после тега div JS

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>

источник

2015-10-01 Nikita Ermolenko

Это может быть достигнуто с помощью метода focus(), добавив одну строку

innerDiv.focus()

Это будет добавлен непосредственно после того, как

insert(div);

Вот полный код ::

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>

источник

2015-10-01 03:14:50 Jesse

Благодарим вас за ответ, но в этом случае после вставки «поля» курсор перемещается в новый тег. Я хочу переместить курсор после тега div. –

| здесь |

–

Боюсь, я не знаю, что это значит. Курсор должен куда-то идти и не опираться на страницу, не находясь внутри какого-то окна, чтобы вводить символы. Вы можете изменить свой вопрос. – Jesse

Я решил эту проблему. Изменен insert способ.

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

источник

2015-10-01 07:46:55

Установить позицию курсора после тега div JS

ответ

Смежные вопросы