Zeichen zählen im Browser
Was ich schon seit längerem vermisst habe ist die Angabe über die Anzahl der Zeichen, die man in einem Textfeld oder eine Textbox eingetippt hat: also einem Zeichen-Counter.
Und wie viele Zeichen habe ich bereits?
Das ist z. B. dann interessant wenn man wissen möchte ob ein Text auch die benötigte Anzahl der Zeichen erreicht hat, um bei der VG Wort gemeldet zu werden oder wenn man Nachrichten von Facebook zu Twitter sendet um zu wissen, wann 140 Zeichen erreicht sind um zu wissen wo der weitergleitete Text endet.
Sicherlich, übergangsweise kann man sich dadurch helfen, indem man den eingetippten Text in einen Texteditor reinkopiert, der die Funktion eingebaut hat. Auf die Dauer ist das keine komfortable Lösung. Es musste eine Lösung her, die auch im Browser angesiedelt ist.
Für Firefox gibt es zwar ein Add-on, dass dieses kann, aber leider noch im experimentellem Stadium und nicht mit Firefox 3.6 kompatibel. Einen weiteren Tipp denn ich via Twitter bekam, war ein Greasemonkey-Script.
Allerdings, die bis jetzt beste Lösung hatte Christian Schaefer in Form eines Bookmarklets (Was sind Bookmarklets?) bereit:
javascript:counter=document.createElement('input');counter.id='counter';counter.style.position='fixed';counter.style.zIndex='1000';counter.style.right='0';counter.style.top='0';document.body.appendChild(counter);textareas=document.getElementsByTagName('textarea');for(i=0;i<textareas.length;i++)textareas[i].addEventListener('keyup',function(e){document.getElementById('counter').value=this.value.length;},false);Download: Zähler-Textbox (txt, 413 Byte)
Wenn du den Code aus der oberen Textdatei als Lesezeichen ablegst, dann werden alle Zeichen, die du in eine Textbox (<textarea>) schreibst mitgezählt. Es werden sowohl "normale" Zeichen als auch die Leerschritte mitgezählt. Doch es geht noch besser:
javascript:var%20counter=document.createElement('input');counter.id='counter';counter.style.position='fixed';counter.style.zIndex='1000';counter.style.right='0';counter.style.top='0';document.body.appendChild(counter);var%20tags=new%20Array('input','textarea','div');for(j=0;j<tags.length;j++){var%20elems=document.getElementsByTagName(tags[j]);for(i=0;i<elems.length;i++){if(typeof(elems[i].value)!='undefined'||elems[i].contentEditable=="true"||elems[i].contentEditable==true)elems[i].addEventListener('keyup',function(e){if(typeof(this.value)!='undefined'){document.getElementById('counter').value=this.value.length;}else{if(typeof(this.innerText)!='undefined'){document.getElementById('counter').value=this.innerText.length;}else{if(typeof(this.textContent)!='undefined'){document.getElementById('counter').value=this.textContent.length;}}}},false);}}Download: Zähler alles (txt, 855 Byte).
Wenn du diesen Code der zweiten Textdatei als Lesezeichen ablegst, dann werden die Zeichen der Textboxen, der Textfelder(<input />) und in div-Boxen , wie sie Facebook hat, mitgezählt.
Und wie läuft das nun ab?
Einfach ein neues Lesezeichen erstellen und eines der beiden Codes als Adresse eingeben:
Neues Bookmarklet anlegen
Anschließend speichern und das ganze ist einsatzbereit. Wenn man es benutzen möchte, setzt man als erstes den Cursor in den Textbereich in welchem man den Text verfassen will und ruft das Bookmarklet auf. Anschließend öffnet sich oben rechts ein zusätzliches Feld in dem die Anzahl der Zeichen gezählt wird (siehe auch die erste Abbildung).
Was das Bookmarklet auch kann ist die die Zeichen korrekt zu zählen, wenn die Zählung durch einen Reload des Bildschirms unterbrochen wurde (z. B. automatische Speicherung bei WordPress) oder wenn man schon geschrieben hat, bevor man das Lesezeichen aufgerufen hat. In solchen Fällen, einfach den Cursor wieder in den Textbereich setzen und weiter schreiben. Nach der Eingabe des nächsten Zeichens zählt das Bookmarklet korrekt weiter.
Super, ich bin zufrieden. Vielen Dank an Christian!
Nachtrag: ich habe das Bookmarklet unter Firefox 3.6, Chrome 4 und Opera 10.10 auf Vista getestet und es läuft einwandfrei. Der Internet Explorer wollte irgendwie nicht, aber das ist nicht weiter schlimm.
Verwandte Artikel
- Kategorien:
- Browser-Erweiterungen
- Tags:
- bookmarklets
- Beitrag:
- Trackback-Adresse und die Druckvorschau
- Kommentare:
- Kommentar abgeben oder Kommentare verfolgen
«« Zum vorherigen Beitrag — Zum nächsten Beitrag »»
7 Reaktionen auf diesen Beitrag »»
Kommentare
Trackbacks und Pingbacks
- Tweets die Webwork-Tools erwähnt -- Topsy.com
- ein Zeichencounter wie bei #Twitter wäre… « Villa der Vampire
Hinterlasse einen Kommentar
27. Januar 2010 um 07:32 folgendes:
Hallo,
kann es sein, dass der Code nicht vollständig ist? Die Schleife im Codefeld ist noch nicht abgeschlossen. Sieht im FF und Chrome identisch aus, funktionieren tut es dann bei mir in beiden nicht.
Würde mich interessieren, da ich sowas auch schon länger gesucht habe
Gruß
Sebastian
27. Januar 2010 um 10:40 folgendes:
@Sebastian,
danke für den Hinweis. WordPress hat bei beiden Beispiel, die letzte Schleife verschluckt. Ich habe vergessen den Code zu maskieren
Habe das ganze jetzt als Textdateien hochgeladen.
27. Januar 2010 um 10:09 folgendes:
Jau, der Code oben ist irgendwann offenbar durch die Codebox selbst beschnitten. Hier die Langversion:
http://pastebin.com/d336e741a
29. Januar 2010 um 17:55 folgendes:
Ja dein Codeblock funktioniert. Bei mir geht obiger immer noch nicht, aber so kann ich das jetzt in beiden Browsern nutzen. Vielen Dank, das hilft wirklich im Browser!
Grüße
Sebastian
3. Februar 2010 um 12:24 folgendes:
Danke sehr nützlich. Funktioniert auch in Opera.