Textarea (maxlength + Anzeige der noch verfügbaren Zeichen)

1 Tilman

Hallo,

ich habe mir ein Script gebastelt, mit dem bei einem Textarea-Feld überprüft werden kann, wie viel Zeichen von den maximal zugelassenen noch übrig sind. Außerdem lässt das Script die Eingabe von mehr Zeichen als die angegebenen nicht zu:

function checkBoxLength(objectid, maxlength, errorspan)
{
var numofsign = document.getElementById(objectid).value.length;
if (numofsign > maxlength) {
scrollTop=document.getElementById(objectid).scrollTop;
selectionStart=document.getElementById(objectid).selectionStart;

         document.getElementById(objectid).value = document.getElementById(objectid).value.substring(0,maxlength);


document.getElementById(objectid).scrollTop=scrollTop;
document.getElementById(objectid).selectionStart=selectionStart;
document.getElementById(objectid).selectionEnd=selectionStart;
stillavailable = 0;
}
else {
stillavailable = maxlength - numofsign;

}
document.getElementById(errorspan).innerHTML=stillavailable;
}

Das Script wird z.B. so aufgerufen:

<textarea id="message" onkeyup="checkBoxLength('message','1000','nochverfuegbar');"></textarea>

Ein Problem aber ist, dass wenn die maximale Anzahl an Zeichen bereits erreicht ist, und man weiteren Text nicht am Ende, sondern innerhalb des bestehenden Textes eingibt, so werden Zeichen am Schluss gelöscht.

2 Jörg Kruse

Ein Problem aber ist, dass wenn die maximale Anzahl an Zeichen bereits erreicht ist, und man weiteren Text nicht am Ende, sondern innerhalb des bestehenden Textes eingibt, so werden Zeichen am Schluss gelöscht.

Was soll das Script denn stattdessen machen?

3 Tilman

Was soll das Script denn stattdessen machen?

Entschuldigung, wollte ich schreiben aber hab es wohl vergessen:
Es soll die Eingabe innerhalb des Textes auch nicht mehr möglich sein. Das eingegebene Zeichen soll gelöscht werden.

4 Jörg Kruse

Du könntest das textareat bei Erreichen der maximalen Zeichenzahl auf "readonly" schalten - dann lässt sich der Inhalt allerdings auch nicht mehr korrigieren.

5 Tilman

Ja, das wäre allerdings blöd.
Gibt es denn keine Möglichkeit, dass das eingegebene Zeichen einfach gelöscht wird?

6 Tilman

Habe mal rumbebastelt:

function checkBoxLength(objectid, maxlength, errorspan)
{
var numofsign = document.getElementById(objectid).value.length;
if (numofsign > maxlength) {
var scrollTop=document.getElementById(objectid).scrollTop;
var selectionStart=document.getElementById(objectid).selectionStart;


         if (selectionStart < maxlength) {
         document.getElementById(objectid).value = document.getElementById(objectid).value.substring(0,selectionStart-1) + document.getElementById(objectid).value.substring(selectionStart,maxlength+1);
         document.getElementById(objectid).selectionStart=selectionStart-1;
         document.getElementById(objectid).selectionEnd=selectionStart-1;
         }

         else {
         document.getElementById(objectid).value = document.getElementById(objectid).value.substring(0,maxlength);
         document.getElementById(objectid).selectionStart=selectionStart;
         document.getElementById(objectid).selectionEnd=selectionStart;
         }


document.getElementById(objectid).scrollTop=scrollTop;

stillavailable = 0;
}
else {
stillavailable = maxlength - numofsign;

}
document.getElementById(errorspan).innerHTML=stillavailable;
}

Leider funktioniert diese Funktion nicht im IE...

7 Jörg Kruse

Der IE kennt kein selectionStart.

In diesem Script wird eine alternative Vorgehensdweise für den IE verwendet:

https://joergs-forum.de/bbcode-einfuegen-t-159-1

Dort geht es zwar um's Einfügen, aber das Grund-Prinzip lässt sich sicher auf dein Script übertragen

Edit:
Dieser Code könnte vielleicht noch hilfreich sein:
Finding selection start and end position in a textarea, in Internet Explorer

8 Tilman

Danke für die Links!
Der Code sieht jetzt wie folgt aus:

function checkBoxLength(objectid, maxlength, errorspan)
{
var objectid = document.getElementById(objectid);
var numofsign = objectid.value.length;

if (numofsign > maxlength) {
var scrollTop=objectid.scrollTop;

if(document.selection) {

        var range = document.selection.createRange();
        var stored_range = range.duplicate();
        stored_range.moveToElementText(objectid);
        stored_range.setEndPoint( 'EndToEnd', range );
        objectid.selectionStart = stored_range.text.length;
        alert(objectid.selectionStart);
        var selectionStart=objectid.selectionStart;
}
else {
var selectionStart=objectid.selectionStart;
}

if (objectid.selectionStart < maxlength) {
         objectid.value = objectid.value.substring(0,selectionStart-1) + objectid.value.substring(selectionStart,maxlength+1);
         objectid.selectionEnd=selectionStart-1;
         objectid.selectionStart=selectionStart-1;
         }

         else {
         objectid.value = objectid.value.substring(0,maxlength);
         objectid.selectionStart=selectionStart;
         objectid.selectionStart=selectionStart;
         }
objectid.scrollTop=scrollTop;

stillavailable = 0;
}
else {
stillavailable = maxlength - numofsign;

}
document.getElementById(errorspan).innerHTML=stillavailable;
}

Der Cursor springt allerdings beim IE immer noch an das Ende :(

nach oben

Beitrag schreiben (als Gast)

Verwandte Themen
Thema	Autor	Forum	Beiträge	Letzter Beitrag
Per Button html-Tags an textarea übergeben	rattlesnake	JavaScript	7	18.05.2008 13:55
Kontaktformular sendet die Daten nicht	User 1753	PHP und MySQL	13	14.01.2016 15:41
Kontaktformular an website anpassen	Sindbad	PHP und MySQL	13	28.02.2015 21:29
Automatisch auf unausgefüllte Pflichtfelder scrollen	andehrl	JavaScript	11	27.05.2011 14:10
Formular "frisst" HTML-Entitäten	scanner	PHP und MySQL	8	30.07.2008 09:03
Google Maps "Meine Karten"	Jörg Kruse	Suchmaschinen	2	09.09.2007 13:14
Rückwärtszähler?	Domenika	JavaScript	3	06.12.2006 13:38

Textarea (maxlength + Anzeige der noch verfügbaren Zeichen)

Beitrag schreiben (als Gast)

Verwandte Themen