Ankündigung

Einklappen
Keine Ankündigung bisher.

OnClick input in Text area

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • OnClick input in Text area

    Hallo!

    Ich möchte ein eMail Formular mit 2 Textareas programmieren. Unter den Textareas sollen Buttons wie BOLD, ITALIC, UNDERLINE usw stehen, so wie hier in dieser Eingabemaske fürs Forum.

    Bei einer Textarea grieg ich das auch hin. Wenn ich das selbe script aber auf die zweite Textarea anwende, funktioniert es nicht mehr. Beim Klick auf zb BOLD beim ersten Textfeld fügt er ins Textfeld ein. Bei Klick auf BOLD beim zweiten Textfeld fügt er aber ebenfalls ins erste Textfeld ein.

    Ich vermute das einfach die zuordnung fehlt, wo der insert rein soll. Ich weiss allerdings nicht wo ich das hinschreiben muss. Target="x" vieleicht?

    Hier der Code: (Das Formular ist in ein PHP script eingebettet das noch andere Funktionen erfüllt.)

    Code:
    echo "
    Bitte geben Sie den Vorschautext ein.
    <img src=\"Bilder/gelb.gif\" width=\"8\" height=\"8\" border=\"0\" alt=\"\">(Der Vorschautext darf maximal 190 Zeichen haben.)<img src=\"Bilder/gelb.gif\" width=\"8\" height=\"8\" border=\"0\" alt=\"\">
    
    <textarea name=\"Teasertext\" cols=\"90\" rows=\"5\"></textarea>
    <input type=\"button\" value=\"f\" onclick=\"insert('', '')\" class=bold><input type=\"button\" value=\"k\" onclick=\"insert('', '')\" class=italic><input type=\"button\" value=\"u\" onclick=\"insert('<u>', '</u>')\" class=underline><input type=\"button\" value=\"Zeilenumbruch\" onclick=\"insert('
    ', '')\"><input type=\"button\" value=\"Zentrieren\" onclick=\"insert('<div align=center>', '</div>')\">
    ";
    
    echo "
    Geben Sie nun den Haupttext ein.
    
    ";
    
    echo "<textarea name=\"Haupttext\" cols=\"90\" rows=\"20\"></textarea>
    <input type=\"button\" value=\"f\" onclick=\"insert('', '')\" class=bold><input type=\"button\" value=\"k\" onclick=\"insert('', '')\" class=italic><input type=\"button\" value=\"u\" onclick=\"insert('<u>', '</u>')\" class=underline><input type=\"button\" value=\"Zeilenumbruch\" onclick=\"insert('
    ', '')\"><input type=\"button\" value=\"Zentrieren\" onclick=\"insert('<div align=center>', '</div>')\">
    ";

  • #2
    Und wie sieht deine insert()-Funktion aus? ^^

    Kommentar


    • #3
      Ups Entschuldigung.

      Hier das Insert Script

      PHP-Code:
      <script type="text/javascript">
      <!--
      function 
      insert(aTageTag) {
        var 
      input document.forms['eingabe'].elements['Haupttext'];
        
      input.focus();
        
      /* für Internet Explorer */
        
      if(typeof document.selection != 'undefined') {
          
      /* Einfügen des Formatierungscodes */
          
      var range document.selection.createRange();
          var 
      insText range.text;
          
      range.text aTag insText eTag;
          
      /* Anpassen der Cursorposition */
          
      range document.selection.createRange();
          if (
      insText.length == 0) {
            
      range.move('character', -eTag.length);
          } else {
            
      range.moveStart('character'aTag.length insText.length eTag.length);
          }
          
      range.select();
        }
        
      /* für neuere auf Gecko basierende Browser */
        
      else if(typeof input.selectionStart != 'undefined')
        {
          
      /* Einfügen des Formatierungscodes */
          
      var start input.selectionStart;
          var 
      end input.selectionEnd;
          var 
      insText input.value.substring(startend);
          
      input.value input.value.substr(0start) + aTag insText eTag input.value.substr(end);
          
      /* Anpassen der Cursorposition */
          
      var pos;
          if (
      insText.length == 0) {
            
      pos start aTag.length;
          } else {
            
      pos start aTag.length insText.length eTag.length;
          }
          
      input.selectionStart pos;
          
      input.selectionEnd pos;
        }
        
      /* für die übrigen Browser */
        
      else
        {
          
      /* Abfrage der Einfügeposition */
          
      var pos;
          var 
      re = new RegExp('^[0-9]{0,3}$');
          while(!
      re.test(pos)) {
            
      pos prompt("Einfügen an Position (0.." input.value.length "):""0");
          }
          if(
      pos input.value.length) {
            
      pos input.value.length;
          }
          
      /* Einfügen des Formatierungscodes */
          
      var insText prompt("Bitte geben Sie den zu formatierenden Text ein:");
          
      input.value input.value.substr(0pos) + aTag insText eTag input.value.substr(pos);
        }
      }
      //-->
      </script> 

      Kommentar


      • #4
        PHP-Code:
        ...
        function 
        insert(aTageTagNameDerTextarea) {
          var 
        input document.forms['eingabe'].elements[NameDerTextarea];
        ... 

        Kommentar


        • #5
          Zitat

          ...
          function insert(aTag, eTag, NameDerTextarea) {
          var input = document.forms['eingabe'].elements[NameDerTextarea];
          ...

          Zitat Ende

          Tut mir sehr leid, aber das verstehe ich nicht ganz

          Meine beiden Textareas sind in einem Form Tag. Also kann ich unter

          Code:
          var input = document.forms['NAMEdesFORMtags'].elements[NameDerTextarea];
          Nicht zwei verschiedene Forms definieren. Eine ergänzung der elements Klammer führt auch nicht zum gewünschten Ergebniss ...

          ...
          Code:
          function insert(aTag, eTag, NameDerTextarea, NameDerZweitenTextarea) { 
            var input = document.forms['eingabe'].elements[NameDerTextarea, NameDerZweitenTextarea];
          ...

          WIe könnte man das denn lösen???

          Kommentar


          • #6
            @DDogg

            Versuch mal bitte, beim nächstenmal dein Code etwas zu formatieren.
            Sieht irgendwie grauenhaft aus.

            Kommentar


            • #7
              Stimmt ja, ich sollte vorher aufräumen befor ich mein gehacke der öffentlichkeit zeige

              Also hier nochmal alles schön aufgeräumt

              PHP-Code:
              <script type="text/javascript">
              <!--
              function 
              insert(aTageTagHaupttextTeasertext) {
                var 
              input document.forms['eingabe'].elements['Haupttext','Teasertext'];
                
              input.focus();
                
              /* für Internet Explorer */
                
              if(typeof document.selection != 'undefined') {
                  
              /* Einfügen des Formatierungscodes */
                  
              var range document.selection.createRange();
                  var 
              insText range.text;
                  
              range.text aTag insText eTag;
                  
              /* Anpassen der Cursorposition */
                  
              range document.selection.createRange();
                  if (
              insText.length == 0) {
                    
              range.move('character', -eTag.length);
                  } else {
                    
              range.moveStart('character'aTag.length insText.length eTag.length);
                  }
                  
              range.select();
                }
                
              /* für neuere auf Gecko basierende Browser */
                
              else if(typeof input.selectionStart != 'undefined')
                {
                  
              /* Einfügen des Formatierungscodes */
                  
              var start input.selectionStart;
                  var 
              end input.selectionEnd;
                  var 
              insText input.value.substring(startend);
                  
              input.value input.value.substr(0start) + aTag insText eTag input.value.substr(end);
                  
              /* Anpassen der Cursorposition */
                  
              var pos;
                  if (
              insText.length == 0) {
                    
              pos start aTag.length;
                  } else {
                    
              pos start aTag.length insText.length eTag.length;
                  }
                  
              input.selectionStart pos;
                  
              input.selectionEnd pos;
                }
                
              /* für die übrigen Browser */
                
              else
                {
                  
              /* Abfrage der Einfügeposition */
                  
              var pos;
                  var 
              re = new RegExp('^[0-9]{0,3}$');
                  while(!
              re.test(pos)) {
                    
              pos prompt("Einfügen an Position (0.." input.value.length "):""0");
                  }
                  if(
              pos input.value.length) {
                    
              pos input.value.length;
                  }
                  
              /* Einfügen des Formatierungscodes */
                  
              var insText prompt("Bitte geben Sie den zu formatierenden Text ein:");
                  
              input.value input.value.substr(0pos) + aTag insText eTag input.value.substr(pos);
                }
              }
              //-->
              </script>

              <form action="" method="" target="" name"eingabe">


              [b]Bitte geben Sie den Vorschautext ein.[/b]


              [img]Bilder/gelb.gif[/img](Der Vorschautext darf maximal 190 Zeichen haben.)[img]Bilder/gelb.gif[/img]




              <textarea name="Teasertext" cols="90" rows="5"></textarea>


              <input type="button" value="f" onclick="insert('[b]', '[/b]')" class=bold>
              <input type="button" value="k" onclick="insert('[i]', '[/i]')" class=italic>
              <input type="button" value="u" onclick="insert('<u>', '</u>')" class=underline>
              <input type="button" value="Zeilenumbruch" onclick="insert('
              ', '')">
              <input type="button" value="Zentrieren" onclick="insert('<div align=center>', '</div>')">




              [b]Geben Sie nun den Haupttext ein.[/b]




              <textarea name="Haupttext" cols="90" rows="20"></textarea>


              <input type="button" value="f" onclick="insert('[b]', '[/b]')" class=bold>
              <input type="button" value="k" onclick="insert('[i]', '[/i]')" class=italic>
              <input type="button" value="u" onclick="insert('<u>', '</u>')" class=underline>
              <input type="button" value="Zeilenumbruch" onclick="insert('
              ', '')">
              <input type="button" value="Zentrieren" onclick="insert('<div align=center>', '</div>')">


              </form> 

              Kommentar


              • #8
                Wieso so kompliziert?

                http://d4rk.com/jstest/index.html

                Oder verstehe ich dich falsch?

                Kommentar


                • #9
                  Danke -tanK-! Funktioniert super!!

                  Weiss auch nich was mich da geritten hat. Das Java Script ist schon ein Jahr alt. Ich glaub sogar das ich es mir irgendwo als Codeschnipsel rauskopiert hab. Damals ....

                  Dachte nich das das so einfach is ... naja Java Script is auch nich mein fachgebiet

                  Nochmal Vielen Dank!

                  Kommentar


                  • #10
                    Hrmpf ....

                    Jetzt ist leider noch ein Problem aufgetreten das ich mit meinen Java Script Kenntnissen nicht beheben kann ...

                    Das Script sieht jetzt so aus:

                    Code:
                    <script language="JavaScript">
                    <!--
                    
                    function SymError()
                    {
                      return true;
                    }
                    
                    window.onerror = SymError;
                    
                    var SymRealWinOpen = window.open;
                    
                    function SymWinOpen(url, name, attributes)
                    {
                      return (new Object());
                    }
                    
                    window.open = SymWinOpen;
                    
                    //-->
                    </script>
                    <script type="text/javascript">
                    
                            function teaser(type) {
                                    document.eingabe.Teasertext.value += type;
                            }
                            function haupt(type) {
                                    document.eingabe.Haupttext.value += type;
                            }
                    
                    </script>
                    Und das Formular:

                    Code:
                    Bitte geben Sie den Vorschautext ein.
                    
                    
                    [img]Bilder/gelb.gif[/img](Der Vorschautext darf maximal 190 Zeichen haben.)[img]Bilder/gelb.gif[/img]
                    
                    
                    
                    
                    <textarea name="Teasertext" cols="90" rows="5" maxlength="190"></textarea>
                    
                    
                    <input type="button" value="f" onclick="teaser('', '')" class=bold>
                    <input type="button" value="k" onclick="teaser('', '')" class=italic>
                    <input type="button" value="u" onclick="teaser('<u>', '</u>')" class=underline>
                    <input type="button" value="Zeilenumbruch" onclick="teaser('
                    ', '')">
                    <input type="button" value="Zentrieren" onclick="teaser('<div align=center>', '</div>')">
                    <input type="button" value="Link setzen" onclick="teaser('', '')" class=bold>
                    
                    
                    
                    
                    Geben Sie nun den Haupttext ein.
                    
                    
                    
                    
                    <textarea name="Haupttext" cols="90" rows="20"></textarea>
                    
                    
                    <input type="button" value="f" onclick="haupt('', '')" class=bold>
                    <input type="button" value="k" onclick="haupt('', '')" class=italic>
                    <input type="button" value="u" onclick="haupt('<u>', '</u>')" class=underline>
                    <input type="button" value="Zeilenumbruch" onclick="haupt('
                    ', '')">
                    <input type="button" value="Zentrieren" onclick="haupt('<div align=center>', '</div>')">
                    <input type="button" value="Link setzen" onclick="haupt('', '')" class=bold>
                    Mein erstes Problem ist damit gelöst. Man kann beide Textareas einzeln ansteuern. Nur das, was er jetzt einfügt, stimmt nicht mehr.

                    Es war so gedacht das jemand ein Wort markiert und zb auf Bold klickt, und dann vor dem markierten Wort und nach dem markierten Wort erscheint. Is ja logich ...

                    Er fügt aber leider nur noch das erste ein.

                    Code:
                    <input type="button" value="Bold" onclick="haupt('', '')" class=bold>
                    Das was in den zweiten ' ' steht, erscheint nichtmehr

                    Warum denn??
                    [/code]

                    Kommentar


                    • #11
                      Es gibt hunderttausende Foren im Netz, die solche Scripte benutzen...Warum also das Rad neu erfinden?

                      Kommentar


                      • #12
                        Auch wenns dumm klingt, ich finde auf teufel komm raus kein Forum in dem das Script nich included wird. Die die ich finde, habe alle auch nur die "Smiley einfüg" funktion. Das mit Vorher Nacher einfügen finde ich nicht ...

                        Vieleicht könnte sich jemand die Mühe machen und einen Link posten in dem man Textformatierung so wie hier im Forum in eine Textarea einfügen kann, und die Funktion bzw das Script leicht ersichtlich im Quellcode steht

                        Das script von selfHTML.org kann ich leider auch nicht so umschreiben das es für 2 Textareas in einem Form brauchbar ist

                        Kommentar


                        • #13
                          woltlab.de
                          phpbb.de

                          und wie sie alle heissen....

                          Kommentar

                          Lädt...
                          X