JavaScript, in Formularfeld schreiben

M

mini_xs

Mitglied
Hallo!
Ich wollte in einem Formular etwas änliches reaisieren wie es hier bei der Eingabe eines neuen Threats möglich ist. Der Benutzer kann auf einen Button klicken und dann kommt eine Prompt Box in der er zum Beispiel einen URL eingeben kann welche dann in einen Link konvertiert wird oder eben eingegebener Text von <b></b> Tags umschlossen wird.
Ich habe nur nirgends gefunden wie ich soetwas realisieren kann.
Bin nicht so der Experte in Java Script, aber die Grundlagen kann ich.

Code: 
<input type="button" class="bginput" value="http://" title="Hyperlink einfügen" onclick="namedlink(this.form,'URL')" onmouseover="stat('url')"
		><input type="button" class="bginput" value=" @ " title="Email Addresse einfügen" onclick="namedlink(this.form,'EMAIL')" onmouseover="stat('email')"
		><input type="button" class="bginput" value="IMG" title="Bild einfügen" onclick="vbcode(this.form,'IMG','http://')" onmouseover="stat('img')">
		&nbsp;
		<input type="button" class="bginput" value=" # " title="CODE" onclick="vbcode(this.form,'CODE','')" onmouseover="stat('code')"
		><input type="button" class="bginput" value="PHP" title="PHP CODE" onclick="vbcode(this.form,'PHP','')" onmouseover="stat('php')"
		><input type="button" class="bginput" value="Liste" title="Liste erstellen" accesskey="l" onclick="dolist(this.form)" onmouseover="stat('list')"
		><input type="button" class="bginput" value="Zitat" title="Zitat einfügen" onclick="vbcode(this.form,'QUOTE','')" onmouseover="stat('quote')"><br>
		
		<input type="text" class="bginput" name="status" style="font-size:7pt" size="50" value="Benutze diese Kontrollen für vB Code">
Das ist der Scriptteil zu den Buttons hier, ist blöd das ich das jetzt klaue, aber ich möchte nur das Ihr seht was ich meine und auch seht das ich mir schon selber gedanken drüber gemacht habe.
Bin für jeden Link mit Erklärung besonders dankbar!
Gruß,
Stefan
 
PHP: 
<html>
<head>
<script type="text/javascript">
function ib() {
  tx = prompt("Bitte Text eingeben, der Fett erscheinen soll:");
  if (tx != "" && tx != null) {
    window.document.tform.message.value += "<b>" + tx + "</b>";
  }
}

</script>

</head>
<body>

<form name="tform">
  <input type="button" onClick="ib();" value=" F ">
  <br><br>
  <textarea name="message"></textarea>
</form>

</body>
</html>
 
Hallo,

Nuinmundo liefert das Skript und ich versuchs noch schnell zu erklären...

1) Du erstellst ein Formular (hier: edit) mit einer Textarea (hier: text)
2) Es folgen die Buttons zur Formatierung (Fett, Kursiv, Farben use...)
3) Diese Buttons bekommen ein onClick Ereignis zugewiesen und rufen eine funktion auf, z.B. edittext(mode)
4) Eine solche Funktion könnte wie folgt aufgebaut sein
PHP: 
function edittext(mode){
switch(mode){
   case "fett":
        txt = prompt("Bitte gib den fetten Text ein","");
        document.edit.text.value += "<b>"+txt+"</b>";
        document.edit.text.focus();
        break; 
    case "kursiv":
        txt = prompt("Bitte gib den kursiven Text ein","");
        document.edit.text.value += "<i>"+txt+"</i>";
        document.edit.text.focus();
        break;
    case "blau":
        txt = prompt("Bitte gib den blauen Text ein","");
        document.edit.text.value += "<span style=\"color:blue;\">"+txt+"</span>";
        document.edit.text.focus();
        break;
   }
}
5. Ein Aufruf der Funktion würde dann so aussehen: onClick="edittext('fett')
6. der Parameter ('Fett') wird in der Funktion ausgelesen und der jeweilige case abgearbeitet.
7. Jetzt wird noch der Inhalt der Textbox erweitert mit document.edit.text.value += "<b>"+txt+"</b>"; - das <b> kannst du naätürlich gegen irgendeinen "Pseudocode" eintauschen

ist eigentlich ganz einfach :)

bye
 
Zuletzt bearbeitet:
Hallo,
ich finde es echt super wie einem hier geholfen wird!!!
Und jetzt wollte ich noch schnell zeigen wie ichs jetzt umgesetzt habe:
PHP: 
<script type="text/javascript">
function edittext(mode){
switch(mode){
   case 'fett':
        txt = prompt("Bitte geben Sie den Text an, der später fett erscheinen soll","");
        if (txt != "" && txt != null) {
    document.edit.text.value += "<b>"+txt+"</b>";
    document.edit.text.focus();      

  }    
  break; 
	case 'link':
        txt = prompt("Bitte geben Sie eine URL im Stil von www.beispiel.de an","");
                        if (txt != "" && txt != null) {
		document.edit.text.value += "<a href=http://\""+txt+"/\" target=\"_blank\">"+txt+"</a>";
        document.edit.text.focus();
        
  }
  break;

und so weiter...

}
}
</script>
Das klappt super und durch die If Abfrage von Nuinmundo gibts auch keine <b>NULL</b> Ausgaben.

PHP: 
   document.edit.text.focus();
dient dazu nach dem schreiben Das Textfeld "text" zu fokusieren, das kann ich aber eigentlich auch weglassen, oder?

Auf jeden Fall vielen Dank für die Hilfe und ich werd versuchen ab jetzt öfter hier vorbeizuschauen und wenns möglich ist auch zu helfen!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück