のcontentEditable、

Question

出力：

hey 
<br /> 
what's up? 

：

<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> 

私はFFで、それは次のようになりますと信じて

およびIE：

hey 
<p>what's up?</p> 

残念ながら、すべてのブラウザでdivタグまたはpタグの代わりに<br />が挿入されるようにしたり、少なくともオンラインで何かを見つけることはできません。

---

とにかく、私は私がボタンを打ったときが、私は、キャレットがテキストの最後に設定したい今やろうとしてそうしています何それは次のようになります。

hey 
what's up?| 

これを行う方法はありません。すべてのブラウザ？

例：

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

     ele.focus(); 

     //set caret -> end pos 
    } 
} 

Answer 1

次の関数は、すべての主要なブラウザでそれを行います：開始時にキャレットを置く

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

がほぼ同じである：それはちょうどブールに渡さ変更する必要があります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); 

Answer 2

は、Googleの閉鎖コンパイラを使用している場合は、以下の（ティムの答えからやや簡略化）を行うことができます。

function placeCaretAtEnd(el) { 
    el.focus(); 
    range = goog.dom.Range.createFromNodeContents(el); 
    range.collapse(false); 
    range.select(); 
} 

ここClojureScriptでも同じことだ：

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

私はIEがわからない、クロム、SafariやFirefoxでこれをテストしている...

Answer 3

残念ながら、ティムの優れた答えは私のために働いていました。

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

ないfocus()場合とselect()が実際に必要とされても確認してください。