blocks|key|3009645|text|以下函数将在所有主要浏览器中执行此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3009646|​|3009647|function+placeCaretAtEnd(el)+{
++++el.focus();
++++if+(typeof+window.getSelection+!=+"undefined"
++++++++++++&&+typeof+document.createRange+!=+"undefined")+{
++++++++var+range+=+document.createRange();
++++++++range.selectNodeContents(el);
++++++++range.collapse(false);
++++++++var+sel+=+window.getSelection();
++++++++sel.removeAllRanges();
++++++++sel.addRange(range);
++++}+else+if+(typeof+document.body.createTextRange+!=+"undefined")+{
++++++++var+textRange+=+document.body.createTextRange();
++++++++textRange.moveToElementText(el);
++++++++textRange.collapse(false);
++++++++textRange.select();
++++}
}

placeCaretAtEnd(+document.querySelector('p')+);|code-block|syntax|javascript|3009648|p{+padding:.5em;+border:1px+solid+black;+}|3009649|<p+contentEditable>foo+bar+</p>|3009650|3009651|将插入符号放在开头几乎是一样的:只需要更改传递给collapse()调用的布尔值。下面是一个示例，它创建了将插入符号放在开头和结尾的函数：|offset|length|style|CODE|3009652|function+createCaretPlacer(atStart)+{
++++return+function(el)+{
++++++++el.focus();
++++++++if+(typeof+window.getSelection+!=+"undefined"
++++++++++++++++&&+typeof+document.createRange+!=+"undefined")+{
++++++++++++var+range+=+document.createRange();
++++++++++++range.selectNodeContents(el);
++++++++++++range.collapse(atStart);
++++++++++++var+sel+=+window.getSelection();
++++++++++++sel.removeAllRanges();
++++++++++++sel.addRange(range);
++++++++}+else+if+(typeof+document.body.createTextRange+!=+"undefined")+{
++++++++++++var+textRange+=+document.body.createTextRange();
++++++++++++textRange.moveToElementText(el);
++++++++++++textRange.collapse(atStart);
++++++++++++textRange.select();
++++++++}
++++};
}

var+placeCaretAtStart+=+createCaretPlacer(true);
var+placeCaretAtEnd+=+createCaretPlacer(false);|3009653|entityMap^0|0|0|0|0|0|0|O|A|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|13|8|@$P|14|Q|15|R|S]]|9|@]|A|$]]|$1|T|3|U|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|V|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|W|$]]

<p>The following function will do it in all major browsers:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            &amp;&amp; typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

placeCaretAtEnd( document.querySelector('p') );</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>p{ padding:.5em; border:1px solid black; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p contentEditable&gt;foo bar &lt;/p&gt;</code></pre>
</div>
</div>
</p>

<p>Placing the caret at the start is almost identical: it just requires changing the Boolean passed into the calls to <code>collapse()</code>. Here's an example that creates functions for placing the caret at the start and at the end:</p>

<pre><code>function createCaretPlacer(atStart) {
    return function(el) {
        el.focus();
        if (typeof window.getSelection != "undefined"
                &amp;&amp; typeof document.createRange != "undefined") {
            var range = document.createRange();
            range.selectNodeContents(el);
            range.collapse(atStart);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (typeof document.body.createTextRange != "undefined") {
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.collapse(atStart);
            textRange.select();
        }
    };
}

var placeCaretAtStart = createCaretPlacer(true);
var placeCaretAtEnd = createCaretPlacer(false);
</code></pre>


blocks|key|3009787|text|如果您使用的是google+closure编译器，则可以执行以下操作(从Tim的回答中进行了一些简化)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3009788|function+placeCaretAtEnd(el)+{
++++el.focus();
++++range+=+goog.dom.Range.createFromNodeContents(el);
++++range.collapse(false);
++++range.select();
}|code-block|syntax|javascript|3009789|在ClojureScript中也是这样：|3009790|(defn+place-caret-at-end+[el]+
+++(.focus+el)
+++(doto+(.createFromNodeContents+goog.dom.Range+el)
+++++++++(.collapse+false)
+++++++++.select))|3009791|我已经在Chrome，Safari和FireFox上测试过了，对IE不太确定…|3009792|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>If you are using the google closure compiler, you can do the following (somewhat simplified from Tim's answer):</p>

<pre><code>function placeCaretAtEnd(el) {
    el.focus();
    range = goog.dom.Range.createFromNodeContents(el);
    range.collapse(false);
    range.select();
}
</code></pre>

<p>Here's the same thing in ClojureScript:</p>

<pre><code>(defn place-caret-at-end [el] 
   (.focus el)
   (doto (.createFromNodeContents goog.dom.Range el)
         (.collapse false)
         .select))
</code></pre>

<p>I have tested this in Chrome, Safari and FireFox, not sure about IE...</p>


blocks|key|3009802|text|不幸的是，Tim的优秀答案只适用于我在结尾的位置，因为在开头的位置我必须稍微修改一下。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3009803|function+setCaret(target,+isStart)+{
++const+range+=+document.createRange();
++const+sel+=+window.getSelection();
++if+(isStart){
++++const+newText+=+document.createTextNode('');
++++target.appendChild(newText);
++++range.setStart(target.childNodes[0],+0);
++}
++else+{
++++range.selectNodeContents(target);
++}
++range.collapse(isStart);
++sel.removeAllRanges();
++sel.addRange(range);
++target.focus();
++target.select();
}|code-block|syntax|javascript|3009804|虽然不确定是否真的需要focus()和select()。|offset|length|style|CODE|3009805|entityMap^0|0|0|B|7|J|8|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>Unfortunately Tim's excellent answer worked for me only for placing at the end, for placing at the start I had to modify it slightly.</p>

<pre><code>function setCaret(target, isStart) {
  const range = document.createRange();
  const sel = window.getSelection();
  if (isStart){
    const newText = document.createTextNode('');
    target.appendChild(newText);
    range.setStart(target.childNodes[0], 0);
  }
  else {
    range.selectNodeContents(target);
  }
  range.collapse(isStart);
  sel.removeAllRanges();
  sel.addRange(range);
  target.focus();
  target.select();
}
</code></pre>

<p>Not sure though if <code>focus()</code> and <code>select()</code> are actually needed.</p>


blocks|key|293591|text|这个(实时)示例显示了一个简短的简单函数setCaretAtStartEnd，它接受两个参数；一个(可编辑)节点用于放置插入符号&一个布尔值用于指示放置它的位置(节点的开始或结束)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|293592|​|293593|const+editableElm+=+document.querySelector('[contenteditable]');

document.querySelectorAll('button').forEach((elm,+idx)+=>+
++elm.addEventListener('click',+()+=>+{
++++editableElm.focus()
++++setCaretAtStartEnd(editableElm,+idx)+
++})
)

function+setCaretAtStartEnd(+node,+atEnd+){
++const+sel+=+document.getSelection();
++node+=+node.firstChild;

++if(+sel.rangeCount+){
++++++['Start',+'End'].forEach(pos+=>
++++++++sel.getRangeAt(0)["set"+%2B+pos](node,+atEnd+?+node.length+:+0)
++++++)
++}
}|code-block|syntax|javascript|293594|[contenteditable]{+padding:5px;+border:1px+solid;+}|293595|<h1+contenteditable>Place+the+caret+anywhere</h1>
<br>
<button>Move+caret+to+start</button>
<button>Move+caret+to+end</button>|293596|293597|entityMap^0|K|I|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|Q|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

<p>This (live) example shows a short simple function, <code>setCaretAtStartEnd</code>, which takes two arguments; A (editable) node to place the caret at &amp; a Boolean indicating where to place it (start or end of the node)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const editableElm = document.querySelector('[contenteditable]');

document.querySelectorAll('button').forEach((elm, idx) =&gt; 
  elm.addEventListener('click', () =&gt; {
    editableElm.focus()
    setCaretAtStartEnd(editableElm, idx) 
  })
)

function setCaretAtStartEnd( node, atEnd ){
  const sel = document.getSelection();
  node = node.firstChild;

  if( sel.rangeCount ){
      ['Start', 'End'].forEach(pos =&gt;
        sel.getRangeAt(0)["set" + pos](node, atEnd ? node.length : 0)
      )
  }
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>[contenteditable]{ padding:5px; border:1px solid; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1 contenteditable&gt;Place the caret anywhere&lt;/h1&gt;
&lt;br&gt;
&lt;button&gt;Move caret to start&lt;/button&gt;
&lt;button&gt;Move caret to end&lt;/button&gt;</code></pre>
</div>
</div>
</p>


<p>output in <strong>Chrome</strong>:</p>

<pre><code>&lt;div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;"&gt;
    hey
    &lt;div&gt;what's up?&lt;/div&gt;
&lt;div&gt;
&lt;button id="insert_caret"&gt;&lt;/button&gt;
</code></pre>

<p>I believe in <strong>FF</strong> it would look something like this:</p>

<pre><code>hey
&lt;br /&gt;
what's up?
</code></pre>

<p>and in <strong>IE</strong>:</p>

<pre><code>hey
&lt;p&gt;what's up?&lt;/p&gt;
</code></pre>

<p>unfortunately, there is no nice way of making it so that every browser inserts a <code>&lt;br /&gt;</code> instead of a div- or p-tag, or at least I couldn't find anything online.</p>

<hr>

<p>ANYWAY, what I am trying to do now is, when I hit the <strong>button</strong>, I want the caret to be set at the end of the text, so it should look something like this:</p>

<pre><code>hey
what's up?|
</code></pre>

<p>any way to do this so it works in <strong>all browser</strong>?</p>

<p>example:</p>

<pre><code>$(document).ready(function()
{
    $('#insert_caret').click(function()
    {
        var ele = $('#content');
        var length = ele.html().length;

        ele.focus();

        //set caret -&gt; end pos
     }
 }
</code></pre>


contenteditable, set caret at the end of the text (cross-browser)

编译器

Chrome中的输出<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">    hey    <div>what's up?</div><div><button id="inser...

问可内容编辑，在文本末尾设置插入符号(跨浏览器)
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可内容编辑，在文本末尾设置插入符号(跨浏览器)EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可内容编辑，在文本末尾设置插入符号(跨浏览器)
EN