jquery Setzen der Cursorposition in contenteditable div

Question

Die alte Version der Frage ist unten, nachdem ich mehr erforscht habe, entschied ich mich, die Frage umzuformulieren. Das Problem wie zuvor ist, dass ich ein contenteditable div fokussieren muss, ohne den Text hervorzuheben, indem ich gerade den Fokus auf den Text in Chrome lege.

Ich stelle fest, dass Leute diese Probleme in Textareas lösten, indem sie die Caret-Position in der Textarea zurücksetzten. Wie kann ich das mit einem zufrieden stellenden Element machen? Alle Plugins, die ich ausprobiert habe, funktionieren nur mit Textareas. Vielen Dank.

Old Phrasierung der Frage:

Ich habe ein contenteditable Element, das ich konzentrieren wollen, aber nur insoweit, als den Cursor an der Vorderseite des das Element zu platzieren, sondern die Auswahl alles.

elem.trigger('focus'); mit jquery wählt den gesamten Text im gesamten Element in Chrom. Firefox verhält sich korrekt und setzt das Caret auf die Vorderseite des Textes. Wie kann ich Chrome so verhalten, wie ich will, oder ist Fokus vielleicht nicht das, was ich suche für.

Vielen Dank.

Answer 1

Demo: http://so.devilmaycode.it/jquery-setting-cursor-position-in-contenteditable-div/

 <div id="editable" contentEditable="true"> 
      <h2>Lorem</h2> <p>ipsum dolor <i>sit</i> 
       amet, consectetur <strong>adipiscing</strong> elit.</p> Aenean. 
     </div> 

---

<script type="text/javascript"> 
     $(function() { 
      $('[contentEditable="true"]').on('click', function (e) { 
       if (!$(this).hasClass('editing')) { 
        var html = $(this).html(); 
        if (html.length) { 
         var range = rangy.createRange(); 
         $(this).toggleClass('editing').html('<span class="content-editable-wrapper">' + html + '</span>'); 
         var $last = $(this).find('.content-editable-wrapper'); 
         range.setStartAfter($last[0]); 
         range.collapse(false); 
         rangy.getSelection().setSingleRange(range); 
        } 
       } 
      }).on('blur', function() { 
       $(this).toggleClass('editing').find('.content-editable-wrapper').children().last().unwrap(); 
      }); 
     }); 
    </script> 

• HINWEIS: nutzen rangy.js https://code.google.com/p/rangy/

Answer 2

Ja, es geschieht, weil Sie

elem.trigger('focus'); 

try-Klasse zu verwenden, verwendet haben oder das Element zu identifizieren, auf dem Sie einen Trigger-Ereignis ausgelöst werden soll.

Answer 3

Vielleicht irre ich die Frage, aber würde das folgende nicht tun (Annahme einer bearbeitbaren <div> mit ID "editierbar")? Der Timer ist da, weil in Chrome, die native Browser Verhalten, das das gesamte Element wählt nach dem focus Ereignis auszulösen scheint, wodurch die Wirkung des Auswahlcode überschrieben, es sei denn, bis nach dem Fokus Veranstaltung verschoben:

var div = document.getElementById("editable"); 

div.onfocus = function() { 
    window.setTimeout(function() { 
     var sel, range; 
     if (window.getSelection && document.createRange) { 
      range = document.createRange(); 
      range.selectNodeContents(div); 
      range.collapse(true); 
      sel = window.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } else if (document.body.createTextRange) { 
      range = document.body.createTextRange(); 
      range.moveToElementText(div); 
      range.collapse(true); 
      range.select(); 
     } 
    }, 1); 
}; 

div.focus(); 

Answer 4

ich es geschafft um dieses Problem nach ein bisschen Stochern um das DOM zu lösen.

elm.focus(); 
window.getSelection().setPosition(0); 

Wahrscheinlich funktioniert nur auf WebKit-Browsern, aber da es die einzige Quelle des Problems ist, habe ich eine bedingte (mit jQuery)

if(!$.browser.webkit) { 
    elm.focus(); 
} else { 
    elm.focus(); 
    window.getSelection().setPosition(0); 
} 

Hoffnung das Ihr Problem löst.

Answer 5

Set Zeigerposition in pre oder div tag:

function setCursor(pos) { 
 
    var el = document.getElementById("asd"); 
 
    var range = document.createRange(); 
 
    var sel = window.getSelection(); 
 
    range.setStart(el.childNodes[0], pos); 
 
    range.collapse(true); 
 
    sel.removeAllRanges(); 
 
    sel.addRange(range); 
 
    el.focus(); 
 
} 
 

 
$('button').click(function() { 
 
    setCursor(5); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="asd" contenteditable="true" > 
 
asd 
 
two 
 
</div> 
 
<button>Set caret position</button>

Quelle: https://social.msdn.microsoft.com/Forums/en-US/f91341cb-48b3-424b-9504-f2f569f4860f/getset-caretcursor-position-in-a-contenteditable-div?forum=winappswithhtml5