Eingabefelder

[Claudia]

Hallo,

ich bin an einem Punkt wo ich allein nicht mehr weiter komme. Ich habe ein Eingabefeld:

<form id="form1" name="form1" method="post" action="">
  <textarea name="nachricht" cols="70" rows="10" id="nachricht"></textarea>
</form>

so in diesem kann der User eine Nachricht schreiben. Ich möchte nun folgendes umsetzten:

Die ersten 300 Zeichen sollen Grau geschrieben werden wenn wir bei 301 und mehr angekommen sind soll ab dem Zeichen 301 die Farbe Grün erscheinen. Also nochmals:

Zeichen 0 - 300 soll ich Grau geschrieben werden
Zeichen 301 - XXX soll dann in Grün weitergeschrieben werden.

Also oben ist das dann Grau und unten wird dann in Grün weiter geschrieben. Kann mir da bitte jemand helfen, wie ich das umsetzten kann?

Gruß,
Claudia

[Beat]

Die ersten 300 Zeichen sollen Grau geschrieben werden wenn wir bei 301 und mehr angekommen sind soll ab dem Zeichen 301 die Farbe Grün erscheinen. Also nochmals:

Die ersten 300 Zeichen sollen den Eindruck von readonly ergeben
alle nächsten Zeichen sollen den Eindruck von unleserlich ergeben, allenfalls mit einer grünen Ampel assoziiert?

In einer Textarea kannst du keine Child-Elemente schreiben, kannst eine Textarea also nicht unterschiedlich formatieren.

Javascript wird dir weiterhelfen.

mfg Beat

[Claudia]

Hallo Beat,

vielen dank für deine Antwort. Schade dass man das so nicht umsetzten kann wie ich das wollte. Aber ok kein Problem. Wie könnte ich das anderes dann machen? also z.b. mit so einer Ampel?

Also wenn man unter 300 Zeichen ist, dann sollte die Ampel auf Grün sein und wenn man über 300 Zeichen ist, dann sollte die Ampel auf Rot kommen.

Kannst du / ihr mir da weiter helfen?

Gruß,
Claudia

[Beat]

Also wenn man unter 300 Zeichen ist, dann sollte die Ampel auf Grün sein und wenn man über 300 Zeichen ist, dann sollte die Ampel auf Rot kommen.

Na aussagekräftige Information ist besser als eine 'Ampel'.

Der Ansatz ist, dem textarea einen Eventhandler zu geben, der eine Routine aufruft.

<textarea
   id="textarea"
   name="text"
   onkeyup="check_length(this.id, 300)"

</textarea>

Ich rufe eine Routine auf, und übergebe ihr die id des Elements zusammen mit der maximalen Textlänge.
Damit kann ich die Routine so schreiben, das sie bei bedarf auch andere Felder prüfen kann.

Prinzip:
Wenn der Text zu lange, blende ein Element (ampel_1) ein, indem display auf block geschaltet wird.

  
<script type="text/javascript">  
  
var ampel_1 = document.getElementById('ampel_1');  
  
function check_length( the_id, maxchars ){  
  var elem = document.getElementById(the_id).value;  
  if( elem.length > maxchars ){  
     ampel_1.style.display = "block";  
  }  
  else{  
     ampel_1.style.display = "none";  
  }  
}  
</script>  

Achtung der Code ist aus der Hüfte geschossen und nicht getestet
und nur ein Ansatzpunkt, wie man so was entwickeln kann.

mfg Beat

[Elya]

Hallo Claudia,

Die ersten 300 Zeichen sollen Grau geschrieben werden wenn wir bei 301 und mehr angekommen sind soll ab dem Zeichen 301 die Farbe Grün erscheinen. Also nochmals:

Du könntest alternativ einen Zähler mitlaufen lassen, der die Anzahl der noch erlaubten Zeichen anzeigt. Google-Suche nach "textarea counter" oder "textarea zeichen zählen" gibt tonnenweise Resultate. Der von Quirksmode sieht ganz brauchbar aus.

Gruß aus Köln-Ehrenfeld,

Elya