molily: Bitte helft mir... textarea mit javascript oder css formatieren?

Beitrag lesen

Hallo, Steffi,

Mit folgendem Script habe ich meine inputtype=text felder formatiert. Kann mir jamnd sagen, wie man das bei einer Textarea macht? Ich probiere schon ewig und habe einfach nicht das nötige Javascriptwissen...

Wieso machst du es dann? Das mit dem JavaScript kannst du dir sparen, zudem hättest du es falsch gemacht. AFAIK hat Netscape >4 auch appName==Netscape, außerdem wirken color und width nicht bei NS4. Mach es dir einfach und formuliere mehrere Stylesheets, einmal für NS4 und einmal für alle anderen (mit border, denn damit kommt NS4 nicht zurecht).

So etwas reicht z.B. völlig aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>murks</title>
<style type="text/css" media="screen" title="Autorenstylesheet">
input.text {font-family:verdana,arial,sans-serif; font-size:13px;}
@media screen {
input.text {width:170px; color:#333333; font-family:verdana,arial,sans-serif; font-size:12px; background-color:#fff; border:1px solid #333333; padding-left:2px;}
textarea {color:#333333; background-color:#ddd; width:450px; height:200px; border:thin inset #000; padding:5px; font-family:verdana,arial,helvetica,sans-serif; font-site:12px;}
}
</style>
</head>
<body>

<form>
<p><input type="text" name="Telefon" value="Telefonnummer" size="18" maxlength="50" class="text" onfocus="if (this.value=='Telefonnummer') this.value=''">
</p>
<p><textarea name="murks" cols="50" rows="10"></textarea></p>
</form>

</body>
</html>

Die in @media screen {...} eingeschlossenen Stylesheetbereiche werden von NS4 ignoriert.

Übrigens, wenn du JavaScript verwendest: clientseitig nach dem Benutzeragent bzw. appName filtern ist hirnrissig, genauso hast du kein noscript-Bereich angegeben, viele Benutzer würden dein Eingabefeld nicht einmal sehen (!). Hinzu kommt, dass es kein language-Attribut gibt, alleinig richtig ist <script type="text/javascript">. Weiterhin musst du, wenn du HTML mit JavaScript dynamisch schreiben willst (document.write), Strings mit Hochkommata einleiten und die Attributwerte dafür in Anführungszeichen setzen:
  document.write('<input type="text" ... onfocus="if (this.value=='Telefonnummer') this.value=''" ...>');
Hochkommata in einem mit Hochkommata begrenzten String musst du mit \ maskieren.  Der Grund ist, dass das gelieferte HTML nicht valide ist, wenn die Attributwerte in Hochkommata anstatt Anführungszeichen stehen.

Übrigens waren deine Stylesheets sehr redundant, wenn du border:1px solid #333333; angibst brauchst du nicht zusätzlich border-right, border-bottom-color und border-left-style dasselbe zuweisen.

Achja, für NS7/Mozilla kannst du auch mit input.text:focus {...} oder allgemein input[type="text]:focus {...} arbeiten, diese Styles treffen zu, wenn der Benutzer das Feld ausgewählt hat, so kannst du es ohne JavaScript zu verwenden hervorheben.

Grüße,
Mathias