Tasten-Cursor in einem DIV mit Attribut contenteditable="true" auf Content von Element mit bestimmter ID setzen

[Michael]

Hallo zusammen,

kennt jemand eine Web-Quelle mit einer JavaScript-Funktion oder hat so eine Funktion irgendwo rumliegen, die in einem DIV-Container mit Attribut contenteditable="true" ( -> Editor-Szenario) einem HTML-Element mit einer per Funktionsparameter übergebenen ID (oder von mir aus auch einem anderen Selektor) den Cursor draufsetzt? (Schön wärs, wenn man per weiterem Parameter noch einstellen kann, ob der Cursor an den Anfang oder ans Ende oder auch eine Position vor oder nach dem Element gesetzt werden soll.)

Hier ein Beispiel, wo das SPAN-Tag mit ID "cursor-container" den Cursor bekommen soll (standardmäßig ganz vorn drauf, also vor das "große C"):

<div contenteditable="true">

   Hier soll der <span id="cursor-container">Cursor</span> drauf.

</div>


<script>

    function setCursorOnElementWithId( id ) {

        . . .

    }

    setCursorOnElementWithId( 'cursor-container' );

</script>

Die Funktion sollte nach Möglichkeit ohne Bibliotheken wie jQuery, Lodash, etc. auskommen.

es grüßt Michael

[Rolf B]

Hallo Michael,

ich denke, du brauchst das Selection API. Viel Spaß beim Einlesen...

Soweit ich das beim ersten Überfliegen gefunden habe, kannst Du mit setBaseAndExtend auf Ebene von DOM Nodes auswählen. Wie das zeichengenau geht, habe ich spontan nicht gefunden. Geht vielleicht mit Range-Objekten.

Ich habe das API noch nicht verwendet und kann darum mehr nicht sagen.

Rolf

[funktionierende Funktion]

Hallo zusammen,

nach einer Weile des Probierens hab ich hier eine Funktion, die in Chrome, Firefox und Edge funktioniert:

            function setCursorOnElementWithId( id ) {
				
				    var el = document.getElementById( id )
				    var range = document.createRange( )
				    var sel = window.getSelection( )
				    
				    range.setStart( el.childNodes[ 0 ], 0 )
				    range.collapse( true )
				    
				    sel.removeAllRanges( )
				    sel.addRange( range )
				    				
			}

(Diese Selection API-Funktionen sind zwar bis heute nicht gerade angenehm und handlich, aber die Cross-Browser-Problematik hat sich zumindest etwas entschärft.)

Danke Euch! Michael

[Henry]

Hallo Michael,

myDiv.focus();

Gruss
Henry

[Henry]

Hallo,

gibts ausser -1 auch ne Begründung wenns falsch ist?

Gruss
Henry

[Rolf B]

Hallo Henry,

nicht mein Minus, aber ich erklär's gerne.

.focus() setzt den Cursor auf die 1. Stelle im contenteditable. Sonst nirgendwohin.

Rolf

[Der Martin]

Hallo Rolf,

.focus() setzt den Cursor auf die 1. Stelle im contenteditable. Sonst nirgendwohin.

wo ist das festgelegt? - Ich meine nämlich, das sei vom verwendeten GUI abhängig.

Zumindest beim Bewegen des Focus mit Tab, Shift-Tab (oder auch zwischen Fenstern mit Ctrl-Tab und/oder Alt-Tab) verhält sich Windows anders als die Linux-Desktops, die ich kenne. Während Windows die Cursorposition und auch die Selektion pro GUI-Element separat speichert und beim Durch-Tab-ben sauber beibehält, kennt der Gnome- oder MATE-Desktop unter Linux nur eine globale Selektion: Markiere ich in einem Fenster ein paar Zeichen, wechsle dann in ein anderes Fenster und markiere dort auch, ist die Markierung im ursprünglichen Fenster weg. Unter Windows nicht.

Ich würde annehmen, dass focus() ähnliche Unterschiede zeigt.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

Während Windows die Cursorposition und auch die Selektion pro GUI-Element separat speichert und beim Durch-Tab-ben sauber beibehält,

Wenn ich hier drei text-Inputs und ein contenteditable div auf eine Seite klebe, dann wird

• beim an-Tab-ben eines text-Input sein kompletter Inhalt markiert
• beim an-Tab-ben des contenteditable div der Cursur auf Pos.1 gestellt und eine Markierung gibt's nicht.

Hängt das auch noch am Brauser?

Rolf

[Der Martin]

Hi,

Wenn ich hier drei text-Inputs und ein contenteditable div auf eine Seite klebe, dann wird

• beim an-Tab-ben eines text-Input sein kompletter Inhalt markiert
• beim an-Tab-ben des contenteditable div der Cursur auf Pos.1 gestellt und eine Markierung gibt's nicht.

Hängt das auch noch am Brauser?

Ein zusammengebautes Beispiel habe ich gerade nicht, aber wenn ich es einfach hier auf der Posting-Editseite probiere, stelle ich auch schon einen Unterschied zwischen einzeiligen und mehrzeiligen Eingabefeldern (textarea) fest. In einem textare-Element verändert sich die Cursorposition und Selektion beim An- und Durch-tab-ben nicht; in den einzeiligen wird bei jedem Focussieren wieder der komplette Inhalt selektiert. Die Cursorposition ist in dem Moment vermutlich undefiniert, er ist ja nicht sichtbar. Aber: Drücke ich einmal Cursor links, ist die Markierung weg und der Cursor steht am Anfang; drücke ich stettdessen Cursor rechts, verschwindet die Markierung auch, aber der Cursor steht am Ende. (Firefox und Pale Moon unter Linux)

Einigen wir uns auf: Kontextabhängig. Okay? 😀

Live long and pros healthy,
 Martin