contenteditable, पाठ (क्रॉस-ब्राउज़र) के अंत

Question

क्रोम में उत्पादन पर सेट कैरट:

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

मेरा मानना ​​है कि एफएफ में यह कुछ इस तरह दिखेगा:

hey 
<br /> 
what's up? 

और आईई:

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

दुर्भाग्यवश,

दुर्भाग्यवश, इसे बनाने का कोई अच्छा तरीका नहीं है ताकि प्रत्येक ब्राउज़र एक div- या p-tag के बजाय <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

आप गूगल बंद संकलक का उपयोग कर रहे हैं, तो आप निम्न कर सकते हैं (कुछ टिम के जवाब से सरलीकृत): यहाँ एक उदाहरण है कि शुरू में कैरट रखने के लिए और अंत में कार्यों बनाता है

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 बारे में निश्चित नहीं क्रोम, सफारी और फ़ायर्फ़ॉक्स, में इस परीक्षण किया है ...

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() वास्तव में जरूरत है, हालांकि सुनिश्चित नहीं हैं।