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

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

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

    --
    sumpsi - posui - obstruxi
    1. 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

  2. Hallo Michael,

    myDiv.focus();
    

    Gruss
    Henry

    --
    Meine Meinung zu DSGVO & Co:
    „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
    1. Hallo,

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

      Gruss
      Henry

      --
      Meine Meinung zu DSGVO & Co:
      „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
      1. Hallo Henry,

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

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

        Rolf

        --
        sumpsi - posui - obstruxi
        1. 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

          --
          Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren.
          1. 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

            --
            sumpsi - posui - obstruxi
            1. 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

              --
              Wer respektiert werden will, sollte zunächst damit anfangen, andere zu respektieren.