Einstellung der position der Einfügemarke auf eine leere Knoten innerhalb eines contentEditable-element
Meine Aufgabe ist es, ein text-Cursor erscheint in einem leeren span-Knoten innerhalb einer contentEditable div.
Folgende bereitet mir keine Probleme auf Firefox 3.6:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js">
</script>
<style>
#multiple {
border: 1px solid #ccc;
width: 800px;
min-height: 20px;
padding: 5px;
outline: none;
}
</style>
<script>
$(document).ready(function(){
var contentEditable = document.getElementById('multiple');
var lastItem = contentEditable.getElementsByTagName('span').item(2);
var selectElementText = function(el, win){
win = win || window;
var doc = win.document, sel, range;
if (win.getSelection && doc.createRange) {
range = doc.createRange();
range.selectNodeContents(el);
range.collapse(false);
sel = win.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
else
if (doc.body.createTextRange) {
range = doc.body.createTextRange();
range.moveToElementText(el);
range.select();
}
}
contentEditable.focus();
selectElementText(lastItem);
});
</script>
<title>Range Selection Tasks (Make Me Want to Cry)</title>
</head>
<body>
<div id="multiple" contentEditable="true">
<span style="color:red">First</span><span style="color:green">Second</span><span style="color:blue"></span>
</div>
</body>
</html>... aber auf Webkit und IE, der Fokus wird auf die vorletzten span. Keine Ahnung, warum. Es funktioniert, wenn ich einen Raum innerhalb der letzten Spanne, dann bekomme ich aber ein ein-Zeichen-Auswahl.
Having said that, es ist akzeptabel, haben Leerzeichen in den letzten Knotens, falls der Cursor ganz am Anfang.
Jede Hilfe bei diesem würde sehr geschätzt werden. Vielen Dank im Voraus.
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
IE s Auswahl/Bereich Modell basiert auf Indizes in text-Inhalte, Missachtung element Grenzen. Ich glaube, es kann unmöglich sein, wird der Eingabefokus innerhalb eines inline-element ohne text. Sicherlich mit deinem Beispiel kann ich nicht setzen, innerhalb der letzten element durch einen Mausklick oder den Pfeiltasten.
Es fast funktioniert, wenn Sie jeden span zu
display: block, aber es gibt immer noch einige sehr merkwürdige Verhalten, abhängig von der Existenz von Leerzeichen in der übergeordneten. Hacking das display zu schauen inline mit tricks wie schwimmen, inline-block und absolute position machen also behandeln Sie jedes element als separaten Editor-Fenster. Relativ positionierte block-Elemente nebeneinander arbeiten, aber das ist wahrscheinlich unpraktisch.Wenn es macht Sie fühlen sich besser, IE9 endlich behebt dieses unangenehme aus und übernimmt die standard-range-Modell. (Hurra!)
Ich würde wahrscheinlich das tun, dann, wenn ein IE Auswahl Experte kann an nichts denken besser. (Ruft Tim Nach Unten!)
U+FEFFmacht als null-Breite in allen gängigen Browsern) an den Anfang eines text-Knotens, die funktioniert, aber verlässt Sie die logistischen Alptraum entfernen des BOMs wenn die Einfügemarke bewegt sich anderswo..move(). Ich habe es geschafft, ein TextRange zu report, dass es in einem inline-element (wenn es ganz am Anfang) jsfiddle.net/GJLPN/13 Leider, die Eingabe nicht der text innerhalb der Knoten. Ah gut..moveEnd(), und dann die Einstellung.textzu "sein" scheint, den trick zu tun :). Diese Technik scheint nicht zu funktionieren mit leeren inline-Elemente aber.innerHTMLbrechen Ereignis-Listener und alle Referenzen zu den untergeordneten Knoten, so würde ich vorschlagen, dass das einfügen eines text-Knotens statt. Das folgende scheint, haben die gleiche Wirkung: jsfiddle.net/GJLPN/34innerHTMLweil ich habe versucht viele verschiedene Dinge, und es ist schneller zu ändern. Ich habe das Gefühl, die verschwinden caret-Zeichen kann ein unlösbares problem. Ich habe versucht einige Dinge, wie das aufrufen.focus()auf das element, und jedesexecCommandBefehle, die aussah, als könnten Sie nichts tun. Das einzige, was ich denken kann, ist so etwas wie ein filter, die möglicherweise dazu, dass das element ihn neu zu Rendern, aber ich würde erwarten, daß zu entfernen Sie den Cursor, wenn nichts.Legen Sie das element
innerHTMLauf einen zero-width-Zeichen:Nun die carret kann es gehen.
​in meinem markup, obwohl (ÈB;hat nicht richtig wiedergegeben).