Ausgabe 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>
Ich glaube an FF würde es ungefähr so aussehen:
hey
<br />
what's up?
und im IE :
hey
<p>what's up?</p>
Leider gibt es keine gute Möglichkeit, es so zu machen, dass jeder Browser ein <br />
anstelle eines div- oder p-Tags einfügt, oder zumindest konnte ich online nichts finden.
Jedenfalls versuche ich jetzt, wenn ich auf den Knopf drücke, dass das Caret am Ende des Textes gesetzt wird, also sollte es ungefähr so aussehen:
hey
what's up?|
Wie funktioniert das, damit es in allen Browsern funktioniert ?
Beispiel:
$(document).ready(function()
{
$('#insert_caret').click(function()
{
var ele = $('#content');
var length = ele.html().length;
ele.focus();
//set caret -> end pos
}
}
javascript
html
cross-browser
contenteditable
caret
Josh Crozier
quelle
quelle
Antworten:
Die folgende Funktion funktioniert in allen gängigen Browsern:
Das Platzieren des Carets am Anfang ist nahezu identisch: Es muss lediglich der Boolesche Wert geändert werden, der an die Aufrufe von übergeben wird
collapse()
. Hier ist ein Beispiel, das Funktionen zum Platzieren des Carets am Anfang und am Ende erstellt:quelle
window.getSelection
und unterstütztdocument.createRange
. DercreateTextRange
Zweig ist für alte Versionen von Internet Explorer.window.getSelection
wird dies von 0,29% aller Browser nicht unterstützt (IE> 8). siehe: caniuse.com/#search=window.getSelectioneditablecontent="true"
...?placeCaretAtEnd(this);
wird nicht für mich arbeiten.Leider hat Tims ausgezeichnete Antwort für mich nur für die Platzierung am Ende funktioniert, für die Platzierung am Anfang musste ich sie leicht modifizieren.
Ich bin mir jedoch nicht sicher, ob
focus()
undselect()
tatsächlich benötigt werden.quelle
Dieses (Live-) Beispiel zeigt eine kurze einfache Funktion
setCaretAtStartEnd
, die zwei Argumente akzeptiert. Ein (bearbeitbarer) Knoten zum Platzieren des Carets bei & ein Boolescher Wert, der angibt, wo das Caret platziert werden soll (Anfang oder Ende des Knotens)quelle
Wenn Sie den Google Closure Compiler verwenden, können Sie Folgendes tun (etwas vereinfacht aus Tims Antwort):
In ClojureScript ist dasselbe:
Ich habe dies in Chrome, Safari und FireFox getestet und bin mir über den Internet Explorer nicht sicher ...
quelle