Javascript : Eingaben in Textarea machen

Tool-Time · 28. August 2003

Guten morgen

ich benötige eine Funktion wie hier im Forum mit denn Smilies .

Sprich wenn ich daruf klicke soll im Textfeld eine Wert eingetragen werden .

In Javascript kenne ich mich überhaupt nicht aus .

Bei mir handelt es sich um ein PHP Script und dort soll so eine ähnliche Funktion eingebaut werden .

Ich habe mir mal aus einem Forum die Funktion angeschaut aber ich finde da leider nicht durch :confused:

Vielleicht kennt jemand von euch ja den Aufbau solch einer Funktion .

Schon einmal Vielen Dank im Vorraus .

Gruß Tool-Time

beetFreeQ · 28. August 2003

So eine Funktion ist schon recht aufwendig. Die vom Board hier finde ich persönlich auch etwas unpraktisch - man kann halt nur am Ende etwas einfügen. Das PHPBB macht's meiner Meinung nach besser, denn da kann man auch an der Stelle des Cursors etwas einfügen und sogar um den markierten Text herum Tags einfügen.

Ich hab den Code für mein eigenes Forum abgeguckt. Vielleicht kommst du damit ja besser klar:


 //Script zum Einfuegen von Forums-Smileys in ein Formular-Textfeld


 //aktuelle Position innerhalb des Textfelds speichern (nur IE)

 function storeCaret()

 {

   if (document.Form.text.createTextRange) 

     document.Form.text.caretPos = document.selection.createRange().duplicate();

 }


 //ein per Variable uebergebener Text wird an der aktuellen Textposition eingefuegt

 function insertSmiley (text)

 {

   //Pruefe ob IE

   if(document.all && !window.opera)

   {   

     if (document.Form.text.createTextRange && document.Form.text.caretPos)

     {

       var caretPos = document.Form.text.caretPos;

       caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;

     }

     else

       document.Form.text.value = text;

   }

   else

   {

     //Wenn kein IE, an Textende anhaengen

     var revisedText;

     var currentText = document.Form.text.value;

	 revisedText = currentText+text;

	 document.Form.text.value=revisedText;

   }

   document.Form.text.focus();      

   return;

 }



 //Script zum Einfuegen von speziellen Forums-Codes in ein Formular-Textfeld


 //aktuelle Position innerhalb des Textfelds speichern (nur IE)

 function storeCaret()

 {

   if (document.Form.text.createTextRange) 

     document.Form.text.caretPos = document.selection.createRange().duplicate();

 }


 //ein per Variable uebergebener Text wird an der aktuellen Textposition eingefuegt (nur IE)

 function insertAtCaret (text)

 {

   if (document.Form.text.createTextRange && document.Form.text.caretPos)

   {

     var caretPos = document.Form.text.caretPos;

     caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;

   }

   else

     document.Form.text.value = text;

 }


 //Auslesen und Formatieren des einzufuegenden Textes

 function formatIt(code)

 { 

   //Pruefe ob IE

   if(document.all && !window.opera)

   {   

     //Selektierten Text auslesen

     strSelection = document.selection.createRange().text 

     //Pruefen, ob Text selektiert ist

     if (strSelection == "")

     { 

       //Per Dialogfenster Text eingeben lassen, formatieren und in Textbox einfuegen

	   var thisFormat = prompt("Geben Sie bitte einen Text ein!", "");

	   var formatCode = "[" + code + "]" + thisFormat + "[/" + code + "]";

       insertAtCaret(formatCode);

     } 

     else

       //selektierter Text wird formatiert

       document.selection.createRange().text = "[" + code + "]" + strSelection + "[/" + code + "]" 

     document.Form.text.focus();      

     return;

   }

   else

   {

     //Wenn kein IE, per Dialogfenster Text eingeben lassen, formatieren und an Textende anhaengen

     var revisedText;

     var currentText = document.Form.text.value;

	 var thisFormat = prompt("Geben Sie bitte einen Text ein!", "");

	 var formatCode = "[" + code + "]" + thisFormat + "[/" + code + "]";

	 revisedText = currentText+formatCode;

	 document.Form.text.value=revisedText;

	 document.Form.text.focus();

	 return;

   }

 }


 //Per Dialog Texte einlesen, formatieren und in Textbox schreiben

 function addUrl()

 {

   var thisURL = prompt("Geben Sie die URL ein!", "http://");

   var thisTitle = prompt("Geben Sie einen Titel zur URL ein!", "Webpage");

   var urlCode = "[URL]"+thisURL+"[-URL-]"+thisTitle+"[/URL]";

   if(document.all && !window.opera)   

     insertAtCaret(urlCode);

   else

   {

     var revisedText;

     var currentText = document.Form.text.value;

	 revisedText = currentText+urlCode;

	 document.Form.text.value=revisedText;

   }

   document.Form.text.focus(); 

   return;

 }


 //Per Dialog Texte einlesen, formatieren und in Textbox schreiben

 function addEmail()

 {

   var thisEmail = prompt("Geben Sie bitte die gewünschte E-Mail-Adresse ein.", "");

   var emailCode = "[MAIL]"+thisEmail+"[-MAIL-]"+thisEmail+"[/MAIL]";

   if(document.all && !window.opera)   

     insertAtCaret(emailCode);

   else

   {

     var revisedText;

     var currentText = document.Form.text.value;

	 revisedText = currentText+emailCode;

	 document.Form.text.value=revisedText;

   }

   document.Form.text.focus(); 

   return;

 }


 function addImg()

 {

   var thisImg = prompt("Geben Sie bitte die gewünschte URL zum Bild ein.", "");

   var emailCode = "[img="+thisImg+"]";

   if(document.all && !window.opera)   

     insertAtCaret(emailCode);

   else

   {

     var revisedText;

     var currentText = document.Form.text.value;

	 revisedText = currentText+emailCode;

	 document.Form.text.value=revisedText;

   }

   document.Form.text.focus(); 

   return;

 }

Die Smiley-Funktion rufst du dann z.B. so auf:


javascript:insertSmiley('')

[/code]




Und die anderen halt analog dazu!

Zu guter letzt muß die Textarea noch folgende Aufrufe im Tag haben:

[code] onSelect="storeCaret();" onClick="storeCaret();" onDblClick="storeCaret();" onKeyup="storeCaret();"

Tool-Time · 28. August 2003

Danke für den Code , ich habe diesen mal soweit eingebunden - nur leider geht dieser net

Ich bekomme Fehler auf dieser Seite angezeigt.

Torzdem danke

beetFreeQ · 28. August 2003

Original geschrieben von Tool-Time
Danke für den Code , ich habe diesen mal soweit eingebunden - nur leider geht dieser net
Ich bekomme Fehler auf dieser Seite angezeigt.
Torzdem danke

Da fällt mir auch noch was ein: Das Textfeld muß den Namen "text" haben, damit's geht... - und das Formular den Namen "Form" - kannst das natürlich auch ändern, wobei du dann auch die einzelnen Aufrufe in den Funktionen anpassen müsstest...

Wo hast du den Code denn eingefügt? Bei mir liegt er direkt im Body der Datei im Formulargerüst!

Tool-Time · 28. August 2003

So ich habe nun einmal den Name des Textfeldes in text geändert .

echo"<td width='65%'><div align='center'><p></p><textarea cols='42' rows='16' name='text' onSelect='storeCaret();' onClick='storeCaret();' onDblClick='storeCaret();'onKeyup='storeCaret();'></textarea></div></td>";

[/php]

Ich habe es innerhalb in eine if Abfrage mit PHP eingebaut.

Vielleicht liegt es ja auch daran -

Wie meintest du das mit Form als Name des Forulares ?

Gruß Tool-Time

beetFreeQ · 28. August 2003

Du kannst dem Formular mit name="Form" den Namen Form zuweisen - oder halt auch einen anderen. Diesen Namen kann man dann in JavaScript benutzen, um das Formular zu identifizieren. Das geht so eigentlich mit allen Objekten, die so auf einer Website liegen können...

Im Script greife ich z.B. immer auf das Textfeld namens "text" im Formular namens "Form" zu, indem ich document.Form.text schreibe...

Hab auch grad gemerkt, daß die Funktion StoreCaret() doppelt da ist. Die untere kan gelöscht werden. Ist wohl nur durch Copy & Paste da rein gerutscht...

Wenn der Fehler im PHP-Code liegt, dann bekommst du ja ne PHP-Fehlermeldung. Und wenn's ein JS-Fehler ist eine JS-Fehlermeldung... - wäre also leicht zu unterscheiden.

Tool-Time · 28. August 2003

Ok, habe es soweit angepasst - der Fehler scheint bei Javascript zu liegen .

Sobald ich auf das Bild gehe passiert nichts und ich bekomme Fehler auf der Seite angezeigt .

Dazu muss ich sagen ich habe deinen Aufrufwerte geändert :



echo"<a href='javascript:insertSmiley($zeichen)'>Bild</a>";

[/php]

Denn mit den beiden zusätzlichen '' wurde der Wert Zeichen nicht mer Übergeben.

Gruß Tool-Time

beetFreeQ · 29. August 2003

Original geschrieben von Tool-Time
Ok, habe es soweit angepasst - der Fehler scheint bei Javascript zu liegen .
Sobald ich auf das Bild gehe passiert nichts und ich bekomme Fehler auf der Seite angezeigt .
Dazu muss ich sagen ich habe deinen Aufrufwerte geändert :
echo"<a href='javascript:insertSmiley($zeichen)'>Bild</a>";

[/php]
Denn mit den beiden zusätzlichen '' wurde der Wert Zeichen nicht mer Übergeben.

Gruß Tool-Time [/b]

Stimmt, wenn du wegen PHP einzelne Hochkommas benutzt, funktionieren die im Funktionsaufruf natürlich nicht... - aber das sollte eigentlich kein Fehler sein...

Welcher Fehler wird dir denn angezeigt (im IE hilft's vielleicht auch, unten links das Fehlersymbol inm der Statusleiste zu doppelklicken)? Hast du die Funktionen auch vor dem Aufruf eingefügt?

Tool-Time · 29. August 2003

Die Javascriptfunktionen sind ganz am Anfang eingebunden :


<html>

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

		<script type="text/javascript">

....

</script>

<?php

Der Aufruf kommt dann Innerhalb des PHP Scritps .

Als Fehlermeldung kommt folgende :

Zeile : 1
Zeichen : 14
Fehler: Syntaxfehler
Code : 0

Vielleicht hilft dir das weiter .

Gruß Tool-Time

beetFreeQ · 29. August 2003

So richtig hilft mir das leider nicht. Hatte gehofft, die Meldung wäre zur Abwechslung etwas aussagekräftiger. Du könntest höchstens noch versuchen, das ganze im Netscape Navigator bzw. Mozilla zu laden und nach Auftreten des Fehlers oben in der Adressleiste "about:javascript" (ich hoffe, der Befehl war so...) ohne die Anführungszeichen einzugeben. Da bekommt man idR. bessere Beschreibungen.

Ich war aber auch der Meinung, daß das Script komischerweise nur funktioniert, wenn man es innerhalb des Formulars - also im Body der Page - einfügt. Im Kopf funktionierte es AFAIK nicht so, wie es sollte... - ich glaub, im PHPBB war das Script auch mitten in der HTML-Seite...

Ansonsten könntest du ja vielleicht mal den Quellcode der Seite posten, die aus deinem PHP-Code generiert wird. Die könnte ich hier dann mal genauer unter die Lupe nehmen...

Tool-Time · 29. August 2003

Hier einmal der ein Auszug aus dem Betreffendencode ,

Es ist eine Smilie Auswahl wie hier im Forum .



echo"<form action='$action' method='post' name='Form'>";

					# smilies 

						$db_smilie = mysql_connect($mysqlhost, $mysqluser, $mysqlpassword);

					if(!$db_smilie){}

					else

					{

						mysql_select_db($mysqldb);


						$sql_smilie = "select zeichen, bild,emotion from groupware_smilie";

						$res_smilie = mysql_query($sql_smilie);

						$num_smilie = mysql_num_rows($res_smilie);

						for($i=0; $i<$num_smilie; $i++)

						{

							$zeichen = mysql_result($res_smilie, $i, "zeichen");

							$bild 	 = mysql_result($res_smilie, $i, "bild");

							$emotion = mysql_result($res_smilie, $i, "emotion");	

							if($i>15){ }

							else 

							{

								echo"<a href='javascript:insertSmiley($zeichen)'>";

								echo"<img src='../bilder/smilie/$bild' alt='$emotion => $zeichen' border='0'> </img>";

								echo"</a>";

								if($i=='3'or $i== '7' or $i=='11' or $i=='15') {echo"<br>";}

							}

						}


					}

					echo"<a href='bbcode.php'><font size='2' color='$white' border='0'>BB-Code</font></a>";							

					echo"</td>";

					echo"<td width='65%'><div align='center'><p></p><textarea cols='42' rows='16' name='text' onSelect='storeCaret();' onClick='storeCaret();' onDblClick='storeCaret();'onKeyup='storeCaret();'></textarea></div></td>";

					echo"<td width='15%'></td>";

[/php]

Danke für deine Hilfe

Gruß Tool-Time

beetFreeQ · 1. September 2003

Hmm, das sieht so schonmal richtig aus...

Kannst du mir vielleicht den enstprechenden HTML-Code mal posten oder mailen (über das Mailformular in meinem Profil), der aus dem PHP-Code generiert wird? Den bekommst du ja, wenn du die Seite im IE öfnest und dort im Menü Ansicht "Quelltext anzeigen" auswählst.

Damit kann ich dann mal meinen Browser hier füttern und schauen, wo der Fehler liegt!

Tool-Time · 2. September 2003

Guten morgen

Qullecode : der Betreffenden Datei

www.blueprojects.de/board/info/module/forum_neu.zip

Website :

www.blueprojects.de/board/info/module/forum_neu.html

Vielleicht findest du ja einen Fehler *hoff*

Gruß Tool-Time

kills · 2. September 2003

versuch ma so



echo"<a href='java script:insertSmiley(\"$zeichen\")'>Bild</a>";

[/PHP]

beetFreeQ · 2. September 2003

Original geschrieben von kills
versuch ma so
echo"<a href='java script:insertSmiley(\"$zeichen\")'>Bild</a>";

[/PHP]
[/b]

Jo, genau das ist es - hab's auch grad probiert! Das Problem ist nämlich, daß die Smiley-Zeichen ja auch Klammern, Doppelpunkte etc beinhalten - und da weiß der Browser ja nicht mehr wirklich, wo die Funktion zuende ist etc.

Also noch Anführungszeichen drum und es funzt richtig gut!

Tool-Time · 2. September 2003

Danke für eure Hilfe ,

jep daran hat es gelegen , nun läuft es *freu*

Gruß Tool-Time

Anmelden

Javascript : Eingaben in Textarea machen

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte