Zur Navigation

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.

31.07.2009 14:55

2 Jörg

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?

31.07.2009 22:03

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.

01.08.2009 10:03 | geändert: 01.08.2009 10:03

4 Jörg

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

01.08.2009 10:38

5 Tilman

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

01.08.2009 10:52

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...

01.08.2009 13:43

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 :(

03.08.2009 12:43

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]