trunx: markierung von text in input-felder

SELF-Forum

markierung von text in input-felder

trunx
– Informationen zu den Bewertungsregeln

hallo forum,

ich sitze heute bereits den ganzen tag an folgendem problem, ich versuche diese beiden scripts unter einen hut zu bringen:

https://developer.mozilla.org/de/docs/Web/API/Document/activeElement

http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/

sprich ich möchte, dass das script zuerst ermittelt auf welchem feld der focus liegt, um dann dort an der fraglichen cursorposition etwas einzufügen.

jetzt ist es spät und ich kann nicht mehr denken. wär schön, wenn mir jmd nen tipp geben könnte, wie's geht.

vielen dank trunx

Beitrag melden
–
Informationen zu den Bewertungsregeln

akzeptierte Antworten

  1. markierung von text in input-felder

    Christian Kruse Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo trunx,

    https://developer.mozilla.org/de/docs/Web/API/Document/activeElement

    http://aktuell.de.selfhtml.org/artikel/javascript/bbcode/

    sprich ich möchte, dass das script zuerst ermittelt auf welchem feld der focus liegt, um dann dort an der fraglichen cursorposition etwas einzufügen.

    jetzt ist es spät und ich kann nicht mehr denken. wär schön, wenn mir jmd nen tipp geben könnte, wie's geht.

    Wo genau liegt denn dein Problem dabei? Was sind deine Schwierigkeiten?

    LG,
    CK

    --
    CK kennt Wayne
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. markierung von text in input-felder

      trunx
      – Informationen zu den Bewertungsregeln

      Wo genau liegt denn dein Problem dabei? Was sind deine Schwierigkeiten?

      moin, gestern war ich einfach nur frustriert. ich sag mal was, was mich schon mal voran bringen würde:

      ich habe zwei textareas jeweils mit text (bspw. einen deutschen und die entsprechende englische übersetzung) und markiere jetzt in einem feld einen ausschnitt. in dem einen beispiel wird sofort nach beendigung der markierung der name der textarea sowie die markierung ausgegeben. ich möchte aber diese ausgabe in variablen ablegen und dann durch click auf einen externen button (wie in dem zweiten beispiel) weiter verarbeiten und halt in dem entsprechenden feld den markierten ausschnitt um anfangs- und endtags ergänzen.

      das speichern klappt zwar, aber die weiterverarbeitung nicht. hier mal der code:

      <!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript" charset="utf-8">
    var sid, sel, selStart, selEnde, areaText;
    function init() {

        function onMouseUp(e) {
            console.log(e);
            var selectedTextArea = document.activeElement;
            sid = selectedTextArea.id;
            selStart = selectedTextArea.selectionStart;
            selEnde = selectedTextArea.selectionEnd;
            sel1 = selectedTextArea.value.substring(0,selStart);
            sel2 = selectedTextArea.value.substr(selEnde);
            sel = selectedTextArea.value.substring(selStart, selEnde);
        }

        function fett() {
            document.getElementById(sid).innerHTML = sel1+"<b>"+sel+"</b>"+sel2;
        }

        function zBruch() {
            document.getElementById(sid).innerHTML = sel1+"<br>"+sel+sel2;
        }

        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
    }
    </script>
</head>
<body onload="init()">
<div>
    Select some text from one of the Textareas below:
</div>
<form id="frm-example" action="#" accept-charset="utf-8">
<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
This is Textarea Example One:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
</textarea>
<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
This is Textarea Example Two:
Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
</textarea><br>
<button onclick="alert(sel2);fett();">Fett</button><button onclick="zBruch();">Zeilenumbruch</button>
</form>
Active Element Id: <span id="output-element"></span><br/>
Selected Text: <span id="output-text"></span>

</body>
</html>

      bye trunx

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. markierung von text in input-felder

        dedlfix
        +1 Informationen zu den Bewertungsregeln

        Tach!

        Wo genau liegt denn dein Problem dabei? Was sind deine Schwierigkeiten?

        das speichern klappt zwar, aber die weiterverarbeitung nicht. hier mal der code:

        "Ich werf euch mal einen Haufen Code hin und ihr sucht mal den Fehler!" - So bitte nicht! Lerne die Entwicklerwerkzeuge deines Browsers kennen. Ich bin mir sicher, dass es dazu Tutorials gibt. Nutze diese, um den Fehler wenigstens einzugrenzen. Es kann dann immer noch sein, dass du an einer Stelle nicht weiterweißt, aber so überhaupt gar nicht nachgeschaut zu haben, was im Browser wirklich passiert und was nicht, ist für eine Fehlersuche wenig hilfreich. Also bitte informiere dich über die Debug-Möglichkeiten, nutze sie um das Problem einzugrenzen und dann beachte nochmal die Frage aus dem Posting, auf das du geantwortet hast. Vermeide dabei solche unspezifischen Aussagen, wie "klappt nicht, funktioniert nicht".

        dedlfix.

        Beitrag melden
        +1
        Informationen zu den Bewertungsregeln

        1. markierung von text in input-felder

          trunx
          – Informationen zu den Bewertungsregeln

          hallo dedlfix, wie immer vielen dank für deinen konstruktiven kommentar :) trunx

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

      2. markierung von text in input-felder

        Jörg Reinholz Homepage des Autors
        −1 Informationen zu den Bewertungsregeln

        Moin!

        ich möchte aber diese ausgabe in variablen ablegen und dann durch click auf einen externen button

        Tja. In dem Augenblick, wo Du auf den Button klickst ist die Textarea aber nicht mehr document.activeElement - das ist dann der Button. Deshalb: Variable außerhalb aller Funktionen erzeugen und darin das Element beim Ereignis onfocus als Objekt speichern. Wenn eine Augabe gewünscht wird (wofür auch immer das gut sein soll) nimm sowas:

        1. var aktivesElement;
        2. <element id="foo" onfocus="aktivesElement=this;">
        3. alert (document.activeElement.id)

        Jörg Reinholz

        Beitrag melden
        −1
        Informationen zu den Bewertungsregeln

        1. markierung von text in input-felder

          Christian Kruse Homepage des Autors
          – Informationen zu den Bewertungsregeln

          Hallo Jörg,

          Tja. In dem Augenblick, wo Du auf den Button klickst ist die Textarea aber nicht mehr document.activeElement - das ist dann der Button. Deshalb: Variable außerhalb aller Funktionen erzeugen und darin das Element beim Ereignis onfocus als Objekt speichern. Wenn eine Augabe gewünscht wird (wofür auch immer das gut sein soll) nimm sowas:

          1. var aktivesElement;
          2. <element id="foo" onfocus="aktivesElement=this;">
          3. alert (document.activeElement.id)

          Bitte keine Event-Handler via Attribut. Das sollte der Vergangenheit angehören, setze ihn lieber im JS.

          LG,
          CK

          --
          CK kennt Wayne
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

        2. markierung von text in input-felder

          trunx
          – Informationen zu den Bewertungsregeln

          Tja. In dem Augenblick, wo Du auf den Button klickst ist die Textarea aber nicht mehr document.activeElement - das ist dann der Button. Deshalb: Variable außerhalb aller Funktionen erzeugen

          das ist klar, die werte sind in solchen variablen gespeichert.

          und darin das Element beim Ereignis onfocus als Objekt speichern. Wenn eine Augabe gewünscht wird (wofür auch immer das gut sein soll) nimm sowas:

          1. var aktivesElement;
          2. <element id="foo" onfocus="aktivesElement=this;">
          3. alert (document.activeElement.id)

          eventhandler wird per js zugewiesen, ist auch klar und alert() funktionierte ja auch. nur halt nicht die übertragung des neuen wertes auf das ehem. fokussierte element. aber das ist ja jz behoben. nochmal vielen dank trunx

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  2. markierung von text in input-felder

    Jörg Reinholz Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Moin!

    • Die Variable AktivArea nimmt auf, welche der Textareas zuletzt den Fokus hatte (wird mit onfocus gesetzt). Das ist wichtig, falls es mehrere gibt (Deine Formulierung lässt mich das vermuten)
    • Das Einfügen des Codes wird onclick gestartet (das return false verhindert, dass das Forumlar gesendet wird)
    • Den Einbau des BB-Codes hätte ich, bis auf das return false, auch als Einzeiler formulieren können.
    <html>
<head>
<title>Einfügen von bb-Code in mehrere Textareas</title>
<script type="text/javascript">
var AktivArea;
function bb_insert(bb) {
    var bb_start = '[' + bb + ']';
    var bb_end   = '[/' + bb + ']';
    var tStart = AktivArea.selectionStart;
    var tEnd = AktivArea.selectionEnd;
    var insText = AktivArea.value.substring(tStart, tEnd);
    var newText = AktivArea.value.substr(0, tStart) + bb_end + insText + bb_start + AktivArea.value.substr(tEnd);
    AktivArea.value = newText;
    AktivArea.focus();
    return false;
}
</script>
</head>
<body>
  <h1>Demo: Einfügen von bb-Code in meherere Textareas</h1>
  <form name="formular" action="">
    <button onclick="return bb_insert('b');">bold</button><button onclick="return bb_insert('i')">italic</button></b><br>

    <textarea id="a1" onfocus="AktivArea=this;"></textarea><br>
    <textarea id="a2" onfocus="AktivArea=this;"></textarea>
  </form>
</body>
</html>

    Jörg Reinholz

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Kleiner logischer Fehler, Ergänzung

      Jörg Reinholz Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Moin!

      Wie der Titel schon sagt ist eine Fehlerkorrektur notwendig und eine Ergänzung angebracht:

      <html>
<head>
<title>Einfügen von bb-Code in mehrere Textareas</title>
<script type="text/javascript">
var AktivArea;
function bb_insert(bb) {
    var bb_start = '[' + bb + ']';
    var bb_end   = '[/' + bb + ']';
    var tStart = AktivArea.selectionStart;
    var tEnd = AktivArea.selectionEnd;
    var insText = AktivArea.value.substring(tStart, tEnd);
    // Korrektur: bb_start und bb_end waren falsch herum:
    var newText = AktivArea.value.substr(0, tStart) + bb_start + insText + bb_end + AktivArea.value.substr(tEnd);
    AktivArea.value = newText;
    AktivArea.focus();
    // Ergänzung: Setzen der Auswahl:
    if (0 > AktivArea.selectionEnd - AktivArea.selectionStart) {
        AktivArea.selectionEnd = tEnd + 6 + bb.length;
    } else {
        AktivArea.selectionStart = tStart + 2 + bb.length;
        AktivArea.selectionEnd = AktivArea.selectionStart;
    } 
    // Ende der Ergänzung
    return false;
}
</script>
</head>
<body>
  <h1>Demo: Einfügen von bb-Code in meherere Textareas</h1>
  <form name="formular" action="">
    <button onclick="return bb_insert('b');">bold</button><button onclick="return bb_insert('i')">italic</button></b><br>

    <textarea id="a1" onfocus="AktivArea=this;"></textarea><br>
    <textarea id="a2" onfocus="AktivArea=this;"></textarea>
  </form>
</body>
</html>

      Jörg Reinholz

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Kleiner logischer Fehler, Ergänzung

        trunx
        – Informationen zu den Bewertungsregeln

        hallo jörg,

        vielen dank, mein fehler war offenbar, die neuen werte via innerHTML zu zu weisen, statt wie du mit value.

        bye trunx

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln