# In <input type=text>  Schrift formatieren



## Chronix (10. August 2006)

Hi, wie kann ich in input Feldern (text oder auch textarea) den text formatiert, also fett, kurssiv oder in anderer Größe darstellen bzw. solcheine Darstellung irgendwie anders erreichen?
Der User soll Text eintippe und dieser wird dann durch Javascript entsprechend formatiert , nur wie kann ich es so anzeigen lassen?

mfg, chronix


----------



## Maik (10. August 2006)

Wie sich die Schrift für Formularelemente formatieren lässt, kannst du im Allgemeinen im SELFHTML-Kapitel Formulare formatieren mit CSS und im Speziellen im CSS-Kapitel Schriftformatierung nachlesen.


----------



## Chronix (10. August 2006)

Danke für den Tipp!
Das ist jedoch nicht das, was ich suche!

Mit CSS kann ich ja nur das aussehen ALLER im Textarea geschriebenen Dinge verändern.
Aber ich kann nicht ein Wort z.B. kursiv und das nächste fett machen, da die html-tags die den Verweis auf den Style beinhalten angezeigt werden, anstatt das sie ausgewertet würden!

Funktioniert soetwas überhaupt mit einem Textarea?

Hier ein Beispiel, wo ich aber nicht herausbekommen habe warum der html-code auch interpretiert wird: Link


----------



## Maik (11. August 2006)

Auf der von dir verlinkten Seite kannst du doch solch einen JavaScript-basierten WYSIWYG-Texteditor herunterladen. (?)


----------



## Chronix (11. August 2006)

hmmm ich glaube ich habe mich da irgendwie dumm ausgedrückt...

Ich wollte genau wie bei diesem Editor Per Click auf eine Schaltfläche die Schrift in einem Textarea/input-textfeld formatieren.
Bekomme aber nicht raus wie ich diese Formatierung mache und habe auch im Code des geposteten Editors nichts finden können.
Hatte erst gedacht es liegt an den Tags die der Editor einfügt, aber bei einem Test in einer eigenen Seite bekam ich keine Formatierung über Tags hin, die Tags wurden einfach nur angezeigt.

Und ums nochmal zu erklären:
Das ganze soll für den Nachrichtenversand in einem Browsergame werden.
Bisher wird im Textarea nur der BB-Code angezeigt und man sieht nur um alles die Klammern drumherum, aber wir würden es gerne, wie bei beschriebenem Editor, so haben, dass die Nachricht direkt formatiert wird, nur habe ich ehrlichgesagt keine Ahnung wie ich das hinbekomm  *g*! Daher meine Frage.


----------



## Sven Mintel (11. August 2006)

Deine Frage lässt sich recht einfach beantworten.Garnicht.

Lediglich im IE gibt es ein ActiveX-Control, welches es ermöglicht, dies mit <textarea> zu tun, falls es dich interessiert, Suche bei Google nach "DHTMLEDIT" ...das ist der Name der ActiveX-Control.


----------



## Chronix (11. August 2006)

Ah, danke für den Tipp 

Werde direkt mal googeln!

Nur eine Frage noch: Das ganze scheint bei mir auch im Firefox und im (zugegeben etwas älteren) Netscape zu klappen!
Also ist das ganze wohl nicht nur für den IE


----------



## Sven Mintel (12. August 2006)

Wenn du mir ein Beispiel zeigst, wo das auch in denen klappt, lass ich mich gerne eines Besseren belehren(ich glaube aber nicht, dass du so ein Beispiel findest...nicht alles, was wie ein <textarea> aussieht, ist auch eines  )


----------



## Chronix (16. August 2006)

http://tinymce.moxiecode.com/example.php?example=true

Also ich les im Quelltext <textarea> 
Daher ists ja eindeutig eine html-textarea, egal wie sie verwendet wird.


----------



## Sven Mintel (16. August 2006)

Wie gesagt...nicht alles was so aussieht, ist auch ein <textarea>...in dem verlinkten Beispiel handelt es sich um ein iFrame.

Schliesslich wird dort Javascript verwendet...damit kann man neue Elemente im Dokument erzeugen und vorhandene verstecken.

Das, was JS dort aus dem <textarea> macht, ist dies:

```
<textarea style="display: none;" id="elm1" name="elm1" rows="10" cols="40">	Some &lt;b&gt;element&lt;/b&gt;, this is to be editor 1.
	&lt;p&gt;Some paragraph. &lt;a href="http://www.sourceforge.net"&gt;Some link&lt;/a&gt;&lt;/p&gt;
	&lt;img src="example_data/logo.jpg"&gt;
</textarea><span id="mce_editor_0_parent" class="mceEditorContainer"><table class="mceEditor" border="0" cellpadding="0" cellspacing="0" height="176" width="340"><tbody><tr><td align="center"><iframe style="width: 340px; height: 196px;" allowtransparency="true" topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" border="0" class="mceEditorIframe" id="mce_editor_0" frameborder="0" height="196" width="340"></iframe></td></tr><tr><td class="mceToolbar" align="center" height="1"><a id="mce_editor_0_bold" href="javascript:tinyMCE.execInstanceCommand('mce_editor_0','Bold');" onclick="tinyMCE.execInstanceCommand('mce_editor_0','Bold');return false;" onmousedown="return false;" class="mceButtonNormal" target="_self"><img src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/themes/simple/images/bold.gif" title="Bold (Ctrl+B)"></a><a id="mce_editor_0_italic" href="javascript:tinyMCE.execInstanceCommand('mce_editor_0','Italic');" onclick="tinyMCE.execInstanceCommand('mce_editor_0','Italic');return false;" onmousedown="return false;" class="mceButtonNormal" target="_self"><img src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/themes/simple/images/italic.gif" title="Italic (Ctrl+I)"></a><a id="mce_editor_0_underline" href="javascript:tinyMCE.execInstanceCommand('mce_editor_0','Underline');" onclick="tinyMCE.execInstanceCommand('mce_editor_0','Underline');return false;" onmousedown="return false;" class="mceButtonNormal" target="_self"><img src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/themes/simple/images/underline.gif" title="Underline (Ctrl+U)"></a><a id="mce_editor_0_strikethrough" href="javascript:tinyMCE.execInstanceCommand('mce_editor_0','Strikethrough');" onclick="tinyMCE.execInstanceCommand('mce_editor_0','Strikethrough');return false;" onmousedown="return false;" class="mceButtonNormal" target="_self"><img src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/themes/simple/images/strikethrough.gif" title="Strikethrough"></a><img src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/themes/simple/images/separator.gif" class="mceSeparatorLine" height="20" width="2"><a id="mce_editor_0_undo" href="javascript:tinyMCE.execInstanceCommand('mce_editor_0','Undo');" onclick="tinyMCE.execInstanceCommand('mce_editor_0','Undo');return false;" onmousedown="return false;" class="mceButtonNormal" target="_self"><img src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/themes/simple/images/undo.gif" title="Undo (Ctrl+Z)"></a><a id="mce_editor_0_redo" href="javascript:tinyMCE.execInstanceCommand('mce_editor_0','Redo');" onclick="tinyMCE.execInstanceCommand('mce_editor_0','Redo');return false;" onmousedown="return false;" class="mceButtonNormal" target="_self"><img src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/themes/simple/images/redo.gif" title="Redo (Ctrl+Y)"></a><img src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/themes/simple/images/separator.gif" class="mceSeparatorLine" height="20" width="2"><a id="mce_editor_0_cleanup" href="javascript:tinyMCE.execInstanceCommand('mce_editor_0','mceCleanup');" onclick="tinyMCE.execInstanceCommand('mce_editor_0','mceCleanup');return false;" onmousedown="return false;" class="mceButtonNormal" target="_self"><img src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/themes/simple/images/cleanup.gif" title="Cleanup messy code"></a><img src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/themes/simple/images/separator.gif" class="mceSeparatorLine" height="20" width="2"><a id="mce_editor_0_bullist" href="javascript:tinyMCE.execInstanceCommand('mce_editor_0','InsertUnorderedList');" onclick="tinyMCE.execInstanceCommand('mce_editor_0','InsertUnorderedList');return false;" onmousedown="return false;" class="mceButtonNormal" target="_self"><img src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/themes/simple/images/bullist.gif" title="Unordered list"></a><a id="mce_editor_0_numlist" href="javascript:tinyMCE.execInstanceCommand('mce_editor_0','InsertOrderedList');" onclick="tinyMCE.execInstanceCommand('mce_editor_0','InsertOrderedList');return false;" onmousedown="return false;" class="mceButtonNormal" target="_self"><img src="http://tinymce.moxiecode.com/tinymce/jscripts/tiny_mce/themes/simple/images/numlist.gif" title="Ordered list"></a></td></tr></tbody></table></span>
```

Wie du siehst...das <textarea> wird per display:none versteckt, dafür steht auf einmal ein iFrame da.. auch wenn im Quelltext nichts davon zu sehen ist.


----------

