在 div 标签 JS 后设置光标位置

Question

I'm writing a math editor and I have problem with inserting div tag (field for formulas).我正在编写数学编辑器，但在插入div标签（公式字段）时遇到问题。 I want that cursor move to position after inserted div (field) and then user have ability to continue typing without replace cursor manually.我希望光标在插入div （字段）后移动到位置，然后用户可以继续打字而无需手动替换光标。

 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>

Answer 1

This can be accomplished with the focus() method by adding this one line这可以通过添加这一行来使用focus()方法来完成

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>

Answer 2

I solved this problem.我解决了这个问题。 Changed insert method.更改了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);
}

在 div 标签 JS 后设置光标位置

问题描述

2 个解决方案

解决方案1
1 2015-10-01 03:14:50

解决方案2
0 2015-10-01 07:46:55

在 div 标签 JS 后设置光标位置

问题描述

2 个解决方案

解决方案1 1 2015-10-01 03:14:50

解决方案2 0 2015-10-01 07:46:55

解决方案1
1 2015-10-01 03:14:50

解决方案2
0 2015-10-01 07:46:55