maxlength für textarea mit JS "simulieren"

[Rankin]

Hi!

Leider gibt es ja für textareas kein maxlength attribut wie für normale text-inputs.
Der Benutzerfreundlichkeit halber möchte ich aber nicht erst serverseitig die Länge der Eingabe kontrollieren, sondern schon gleich clientseitig.

Ich habe folgende Funktion gemacht (wird durch onkeyup ausgelöst):

function checkTextArea(obj, maxLength)
{
  var textArea = document.getElementById(obj);
  var length = textArea.value.length;

if(length > maxLength)
  {
    textArea.value = textArea.value.substr(0, maxLength);
  }
}

Diese sorgt dafür, dass wenn die von mir definierte "maxlength" überschritten wird, die überzähligen Zeichen sofort gelöscht werden.
Das funktioniert zwar, aber ist irgendwie unschön, da eben die überzähligen Zeichen noch kurz angezeigt werden.

Hat jemand von euch eine Idee, wie ich das "schöner" machen kann, also so, dass die überzähligen Zeichen erst garnicht mehr erscheinen?

[Tom]

Hello,

Leider gibt es ja für textareas kein maxlength attribut wie für normale text-inputs.
Der Benutzerfreundlichkeit halber möchte ich aber nicht erst serverseitig die Länge der Eingabe kontrollieren, sondern schon gleich clientseitig.

Ich habe folgende Funktion gemacht (wird durch onkeyup ausgelöst):

Und was machst Du, wenn jemand mittels Drag & Drop den Inhalt in die Textarea manövriert?

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Rankin]

Und was machst Du, wenn jemand mittels Drag & Drop den Inhalt in die Textarea manövriert?

Nichts, das Script schneidet auch dann den Rest ab.

[wahsaga]

hi,

Das funktioniert zwar, aber ist irgendwie unschön, da eben die überzähligen Zeichen noch kurz angezeigt werden.

Hat jemand von euch eine Idee, wie ich das "schöner" machen kann, also so, dass die überzähligen Zeichen erst garnicht mehr erscheinen?

deine prüfung baut darauf auf, dass die länge des textareainhaltes eine grenze _überschreitet_.

wenn das zeichen, dass diese grenze überschreiten _würde_, aber gar nicht erst dort auftaucht - dann kannst du dies logischerweise auch nicht mehr per javascript abfragen.

du kannst höchstens noch versuchen, den benutzten eventhandler gegen einen zu tauschen, der früher "feuert" - aber auch damit wirst du das nicht ganz weg kriegen, weil wie gesagt deine prüfung dann m.E. überhaupt nicht mehr funktionieren könnte.

gruß,
wahsaga

[Rankin]

Danke für deine Antwort!

Gibt es keine Möglichkeit, beispielsweise bei onkeydown oder onkeypress, das, was der User eingibt irgendwie "abzufangen"?

[Axel Richter]

Hallo,

Gibt es keine Möglichkeit, beispielsweise bei onkeydown oder onkeypress, das, was der User eingibt irgendwie "abzufangen"?

Nein.

Aber: Hast Du das mit dem onkeyup mal im IE probiert? Hier musst Du ohnehin onkeypress verwenden damit es überhaupt funktioniert.

Und: Bitte lass das getElementById() für ein Element, welches ohnehin schon in einer HTMLCollection steht. Das TextArea-Element steht in der Collection document.forms["formID"].elements["elementID"].

Allerdings brauchst Du, dank this, selbst das hier nicht.
...
function checkTextArea(obj, maxLength) {
  var textArea = obj;
  var length = textArea.value.length;
  if(length > maxLength) {
    textArea.value = textArea.value.substr(0, maxLength);
  }
}
...
<form action="#" method="post">
<textarea name="MyTA" cols="25" rows="25" onkeypress="checkTextArea(this, 50);"></textarea>
</form>

viele Grüße

Axel

[Tom]

Hello,

Gibt es keine Möglichkeit, beispielsweise bei onkeydown oder onkeypress, das, was der User eingibt irgendwie "abzufangen"?
Nein.

im IE doch.

Aber leider komm ich im Moment nicht an den Server, auf dem das Beispiel liegt. Aus dem Kopf weiß ich es nicht mehr. Herausgefunden habe wir das mal, als wir ohne Nutzug des Designmode einen Editor mit JavaScript für den Browser erstellen wollten.

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Sebastian Becker]

Hallo, Rankin,

Leider gibt es ja für textareas kein maxlength attribut wie für normale text-inputs.

Hat jemand von euch eine Idee, wie ich das "schöner" machen kann, also so, dass die überzähligen Zeichen erst garnicht mehr erscheinen?

hier gibt es eine Lösung für den IE ...

Add Maxlength Functionality to Textareas

Weitere Lösungen ...

Dynamic Drive Form Field Limiter
HTML-Seminarmaterial von Thomas Meinike

Eine serverseitige Überprüfung wäre sicherlich auch sinnvoll ...

Grüße,

Sebastian

[Tom]

Hello,

Add Maxlength Functionality to Textareas
Dynamic Drive Form Field Limiter
HTML-Seminarmaterial von Thomas Meinike

Mit Drag & Drop können die alle nicht umgehen.

Harzliche Grüße aus http://www.annerschbarrich.de

Tom

[Sebastian Becker]

Hallo, Tom,

Mit Drag & Drop können die alle nicht umgehen.

ich wüßte auch nicht, welcher EventHandler darauf reagiert.

Ich denke aber, daß man mit diesem Manko gut leben kann, zumal es nicht unbedingt üblich ist, Texte in Textareas hineinzuziehen.

Notfalls kann man periodisch die Zeichenzahl in der Textarea abfragen und ggf. eine Warnmeldung anzeigen bzw. den Text begrenzen.

Wenn man dann noch zusätzlich mit einer serverseitigen Abfrage arbeitet, kann man absolut zuverlässig zu umfangreiche Beiträge verhindern ...

Grüße,

Sebastian

[wahsaga]

hi,

Mit Drag & Drop können die alle nicht umgehen.

ich wüßte auch nicht, welcher EventHandler darauf reagiert.

onmouseover?

gruß,
wahsaga

[wahsaga]

hi,

Mit Drag & Drop können die alle nicht umgehen.

ich wüßte auch nicht, welcher EventHandler darauf reagiert.

onmouseover?

na gut, der ist vielleicht noch am ungeeignetsten, bzw. müsste mit onmouseup o.ä. kombiniert werden.

gruß,
wahsaga

[Sebastian Becker]

Hallo, wahsaga,

Mit Drag & Drop können die alle nicht umgehen.
ich wüßte auch nicht, welcher EventHandler darauf reagiert.
onmouseover?
na gut, der ist vielleicht noch am ungeeignetsten, bzw. müsste mit onmouseup o.ä. kombiniert werden.

auch ohne Kristallkugel habe ich den vermutlich richtigen EventHandler bei Microsoft gefunden: ondragleave

There is no public standard that applies to this event.

Perfektionisten könnten sich da ja was zusammenbasteln ...

Grüße,

Sebastian

[Rankin]

Prima Danke!