In <input type=text> Schrift formatieren

C

Chronix

Erfahrenes Mitglied
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
 
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
 
Zuletzt bearbeitet:
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.
 
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.
 
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
 
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 ;) )
 
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:
Code: 
<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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück