contenteditable，在文本的末尾设置插入符号（跨浏览器） [英] contenteditable, set caret at the end of the text (cross-browser)

问题描述

Chrome 中输出

：

 < div id =contentcontenteditable =true style =border：1px solid＃000; width：500px; height：40px;> 
 hey 
< div>有什么？< / div> 
< div> 
< button id =insert_caret>< / button> 
  
 
 
 
我相信 FF 会是这样：
  hey 
< br /> 
是什么？ 
  
和 IE ：
  hey 
< p>有什么？< / p& 
  
不幸的是，没有什么好的方法让每个浏览器插入< br /> 而不是div或p标签，或者至少我在网上找不到任何东西。
 
 
 
 
 
 
任何时候，我现在想做的是，当我点击按钮时，我想要在文本结尾处设置插入符号，因此它应该看起来像这样：
  hey 
怎么了？ 
  
以任何方式执行此操作，所以它可以在所有浏览器 p> 
 
 
例如：
  $（document）.ready b $ b {
 $（'＃insert_caret'）。click（function（）
 {
 var ele = $（'＃content'）; 
 var length = ele。 html（）。length; 
 
 ele.focus（）; 
 
 //设置caret  - > end pos 
} 
} 
  
 
 
解决方案
以下函数将在所有主流浏览器中执行：
  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 .body.createTextRange！=undefined）{
 var textRange = document.body.createTextRange（）; 
 textRange.moveToElementText（el）; 
 textRange.collapse（false）; 
 textRange.select（）; 
} 
} 
 
 placeCaretAtEnd（document.getElementById（content））; 
 
在开头放置插入符号几乎是相同的：它只是需要更改传递到调用的布尔值 collapse（）。下面是一个创建用于在开头和结尾放置插入符的函数的示例：
  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）; 
  
 
output in Chrome:
<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">
    hey
    <div>what's up?</div>
<div>
<button id="insert_caret"></button>
I believe in FF it would look something like this:
hey
<br />
what's up?
and in IE:
hey
<p>what's up?</p>
unfortunately, there is no nice way of making it so that every browser inserts a <br /> instead of a div- or p-tag, or at least I couldn't find anything online.




ANYWAY, what I am trying to do now is, when I hit the button, I want the caret to be set at the end of the text, so it should look something like this:
hey
what's up?|
any way to do this so it works in all browser?

example:
$(document).ready(function()
{
    $('#insert_caret').click(function()
    {
        var ele = $('#content');
        var length = ele.html().length;

        ele.focus();

        //set caret -> end pos
     }
 }

解决方案
The following function will do it in all major browsers:
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.getElementById("content") );
Placing the caret at the start is almost identical: it just requires changing the Boolean passed into the calls to collapse(). Here's an example that creates functions for placing the caret at the start and at the end:
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);


                        
这篇关于contenteditable，在文本的末尾设置插入符号（跨浏览器）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！