Mastershrimp: Cursorposition in einem Textfeld ermitteln

Hallo!

Wisst ihr, wie man die Position des Cursors innerhalb einer textarea ermitteln kann?

Ich brauche das, weil ich in einem Forum eine "Smilie-Einfügen"-Funktion einbauen möchte, die den Smilie dort plaziert, wo der Cursor des Users gerade ist.

Momentan habe ich leider nämlich nur die Möglichkeit am Ende des Textes den Smilie anzufügen.

Allerdings haben Forensysteme wie vBulletin o.Ä. die Einfügen-Funktion so eingebaut, wie ich es suche...

Wie machen die das? Muss doch eigentlich mit JavaScript gehen, oder?

Danke im Vorraus!

Gruß

Mastershrimp

  1. hab genau das vor 2 tagen gemacht ;o)

    <script language="JavaScript">
    <!--
    var globalCursorPos;
    function setCursorPos() {
    globalCursorPos = getCursorPos(document.Nachricht.Message);
    }
    function getCursorPos(textElement) {
    var sOldText  = textElement.value;
    var objRange  = document.selection.createRange();
    var sOldRange = objRange.text;
    var sWeirdString = '#%~';
    objRange.text = sOldRange + sWeirdString;
    objRange.moveStart('character', (0 - sOldRange.length - sWeirdString.length));
    var sNewText  = textElement.value;
    objRange.text = sOldRange;
     for (i=0; i <= sNewText.length; i++) {
      var sTemp   = sNewText.substring(i, i + sWeirdString.length);
      if (sTemp  == sWeirdString) {
        var cursorPos = (i - sOldRange.length);
        return cursorPos;
      }
     }
    }
    function insertString(stringToInsert) {
      var firstPart  = document.Nachricht.Message.value.substring(0,globalCursorPos);
      var secondPart = document.Nachricht.Message.value.substring(globalCursorPos,document.Nachricht.Message.value.length);
      document.Nachricht.Message.value = firstPart + stringToInsert + secondPart;
    }
    //-->
    </script>

    <textarea name="Message" cols="76" rows="12" id="Message" onClick="setCursorPos();"></textarea>

    <img src="images/smilies/d.gif" width="62" height="28" border="0" STYLE="cursor:hand" onClick="insertString(' ::d ');">

    wenn ich was vergessen haben sollte findest du es unter http://www.fotosingle.de

    wenn dir jemand schreibt und du antwortest...

    1. Ok. Vielen Dank euch beiden!

      Den Code selber raussuchen war ich zu faul ;)
      Ich suchte die Funktion getCursorPos() - dann hätte ichs mir selber zusammengebaut. Aber so ists natürlich noch praktischer ;)

      Danke!

  2. Hallo Mastershrimp,

    Allerdings haben Forensysteme wie vBulletin o.Ä. die Einfügen-Funktion so eingebaut, wie ich es suche...
    Wie machen die das? Muss doch eigentlich mit JavaScript gehen, oder?

    genau da nachgucken ;-)
    quelltext der seite speichern, zugehörige scripte, bilder und andere elementerunterladen,
    bis die seite lokal auch läuft und dann den code anschauen und alles überflüssige rauslöschen
    (zwischendurch immer wieder probieren, ob das, was du haben willst, noch geht).
    ist imho der beste weg, um etwas dazuzulernen. dabei lernt man mit jedem schritt den code auch besser verstehen.

    freundl. Grüße aus Berlin, Raik