✔ Schriftart ändern in Textarea – Auswahl aus select

[Frank73]

Guten Morgen,

Ich glaube ich werd es nie lernen

Folgendes möchte ich realisieren. Die über eine Selectbox gewählte Schrift soll in der Textarea erscheinen. Das ganze darf die Seite aber nicht neu laden, weswegen onchange="this.form.submit() nicht funktioniert. Welche Möglichkeiten habe ich?

<select name="ttf" SIZE="4" style="width: 100px; padding: 0px; font-size: 10px;" onchange="****************?">
      <option value="Times">Times</option>
      option value="Verdana">Verdana</option>
      <option value="Schreibschrift">Schreibschrift</option>
      <option value="Handschrift">Handschrift</option>
</select>

<TEXTAREA style="font-family: <?php echo $font;?> font-size:<?php echo $fontsize;?>;" NAME="Nachricht"></TEXTAREA>

Für jeden Tipp bin ich dankbar!

Liebe Grüße

Frank

 

[CPoly]

Gib dem Textfeld am Besten noch eine ID und dann

onchange="document.getElementById('nachricht').style.fontFamily=this.value;"

 

[Frank73]

Okay ich habe es nun wie folgt gelöst:

.
.
.
 <select name="ttf" SIZE="4" style="width: 100px; padding: 0px; font-size: 10px;" onchange="fontData('setfont.php', 'font='+this.value+'TXTSTRING<?php echo $id;?>')">
.
.
.


<div id="fontresult">             
<TEXTAREA style="font-family: <?php echo $Schrift;?>; font-size:<?php echo $FontSize;?>;"  NAME="Nachricht" id="texteingabe" onkeypress="Eingabe1(this)" onkeyup="Eingabe1(this)" onkeydown="OnKeyDownInTextArea(this,520)" wrap="virtual" maxlength="520">
<?php echo $WK_Nachricht;?>
</TEXTAREA>
</div>

ABER: Ein ungespeicherter Text in der Textarea fliegt beim wählen einer neuen Schrift raus. Muss ja, den er holt die Variable $WK_Nachricht aus einer Datenbank. Wie kann ich es schaffen, das er den schon geschriebenen Text aus der Textarea behält und der Umweg über das Auslesen in der Datenbank nicht erfolgen muss?

 

[CPoly]

Also bei meiner Lösung bleibt der Text erhalten. Ich weiß ja nicht, was du bei "fontData" machst.

Und du solltest dir angewöhnen nicht immer das PHP mit zu posten, sondern nur das resultierende HTML. Das macht es für uns einfacher.

 

[Frank73]

FontData macht einen Ajax Request. Deine Lösung ist gut, wenn es nur um die Schrift geht. Ich habe aber je nach Schrift eine andere Größe. Die wird in der PHP definiert.

function fontData(url, qStr)
{
   if (url.length==0)
   {
       document.getElementById("fontresult").innerHTML="";
       return;
   }
   xmlHttp=GetXmlHttpObject()
   if (xmlHttp==null)
   {
       alert ("Browser does not support HTTP Request");
       return;
   }

   url=url+"?"+qStr;
   url=url+"&sid="+Math.random();
   xmlHttp.onreadystatechange=stateChanged1;
   xmlHttp.open("GET",url,true) ;
   xmlHttp.send(null);
}

Theoretisch muss ich nur den Text aus der Textarea mit dem Namen (Nachricht) holen und beim Aufruf der Funktion an FontData übergeben. Nur habe ich keine Ahnung wie ich das machen soll...

 

[CPoly]

Wenn du nicht gerade 1000 Schriftarten hast, dann lass den AJAX Request weg und hinterleg die Größe direkt im Dokument. Z.B. anstatt nur font-family zu setzen, könntest du deinen option-inputs als value den Wert für die font Eigenschaft (family, size, weight, etc.) geben. Und selbst mit dem AJAX Request verstehe ich nicht, wieso du den Inhalt des Textfeldes verlierst? Was passiert denn in "stateChanged1"?

 

[Frank73]

Gedanklich würde ich es so machen:

onchange="fontData('setfont.php', 'font='+this.value'+'document.Eingabe.Nachricht.value')">

nur irgendwie schein das nicht zu funktionieren.

 

[Frank73]

Das passiert in stateChanged1()

function stateChanged1()
{
   if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
   {
           document.getElementById("fontresult").innerHTML= xmlHttp.responseText;
   }
   else {
           //alert(xmlHttp.status);
   }
}

 

[CPoly]

Wieso liefert die Abfrage denn die gesamte Textarea als Ergebnis? Es würde doch eine simple Zahl reichen, die die Schriftgröße angibt?

 

[Frank73]

Das verstehe ich jetzt nicht ganz. Die Funktion aktualisiert die Textarea mit den neuen Werten, also der Schriftart und der Schriftgröße.

Probiere an deinem Vorschlag rum.

onchange="document.getElementById('nachricht').style.fontFamily=this.value;"

Scheitere aber auch dort. Javascript wird ich glaube nie mein Freund werden ;-)