jQuery: ein Fortschrittsbalken auf die "Füllung" eines textarea zeigen

Oft Probleme, die einfach scheinen zu lösen, beweisen schwieriger als erwartet, und das ist, dass in der Regel gibt es zu verlieren einen halben Tag Arbeit befreien versuchen mehr oder weniger orthodoxe und fieberhafte Beratungen Websites, verzweifelt nach jemandem, der bereits das hat konfrontiert Problem.

Wenn ein Projekt, das ich die Notwendigkeit, die Anzahl der Zeichen in einer textarea Ich dachte, ich gelöst in ein paar Minuten erlaubte Grenze hatte, war es nicht so, fand ich mehrere Lösungen auf dem Netz, aber keine hat mich überzeugt bis zum Ende, so habe ich beschlossen, Umsetzung etwas Brauch mit jQuery und die große jQueryUI , insbesondere die Komponente des Pakets progessbar.

Wiederherstellung von Dateien benötigt

Colleghiamoci zu http://jqueryui.com/ und klicken Sie auf den Button "Custom Build Downloads" oben rechts.
Auf der nächsten Seite wählen Sie nützliche Komponenten und eines der Widgets zur Verfügung haben wir beschlossen, nur die Progressbar zu nehmen.

Wir wählen die grafische Vorlage aus dem Dropdown-Menü auf der rechten Seite und klicken Sie auf "Download". Entpacken Sie das Paket, das Sie gerade heruntergeladen haben, und es gibt drei Ordner und eine Datei in das Root:

• css enthält den Ordner des gewählten Thema, in unserem Fall die Standard-, ui-Leichtigkeit
• Entwicklungs-Bundle enthält Beispiele und Dokumentation
• JS: Es enthält die beiden Dateien benötigt, um unsere Lösung laufen, jQuery und jQuery-UI-1.4.4.min.js-1.8.9.custom.min.js
• index.html: eine Seite, die Sie uns ein Beispiel von Themen / Widgets haben wir uns erlaubt die

Für unsere kleinen Beispiel erstellen wir eine einfache Struktur wie folgt:

• dekomprimiert Ordner jQueryUI (jquery-ui-1.8.9.custom)
• file.html Paket mit den textarea
• file.js mit dem jQuery-Code

Wir erstellen unsere HTML-Datei, geben Sie ihm einen aussagekräftigen Namen (wir mrw_jquery_txtcheck.html call) und stecken in den head-Tag Einschlüsse erforderlich: Links zum Thema CSS und JS-Dateien für jQuery und jQueryUI.

 href = "jquery-ui-1.8.9.custom/css/ui-lightness/jquery-ui-1.8.9.custom.css" <link type="text/css" rel="stylesheet" />







 <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-1.4.4.min.js"> </ script>







 <script type="text/javascript" src="jquery-ui-1.8.9.custom/js/jquery-ui-1.8.9.custom.min.js"> </ script>

In den Körper fügen Sie die textarea:

 



 <div> <textarea name="limitedOne" id="limitedOne" style='width:250px;height:100px;'> </ textarea> </ div>

 

Dann wählen Sie die div, dass die Progressbar und einen Platzhalter, um Ihnen eine Vorstellung davon, wie viele Zeichen sind auch numerische enthalten wird.

 <div id="progress" style="height: 20px;"> </ div>







 Erhältlich <p> id="charCounter"> 255 </ span> Zeichen. </ P>

Jetzt können wir in eine separate Datei vor, die Javascript / jQuery mit den notwendigen Funktionen, die dann auch eine Einbeziehung in den head-Tag, wir rufen Sie check_textarea.js schreiben.
Definieren Sie zunächst die grundlegenden Variablen, die erlaubten Zeichen und die zur Verfügung den gleichen Wert zu Beginn:

 MAX_CHARS = 255;







 Verbleibende = MAX_CHARS;

Dann definieren wir die Funktion steuert und verbessert die Progressbar und Zähler:

 checkTextareaLength function () {





  



 current_length == undefined var = $ ("# limitedOne.") val (). Länge?

 



 0: $ ("# limitedOne.") Val () Länge;.



  



 Verbleibende = (MAX_CHARS - current_length);



	

  



 if (Verbleibende <0) {

	

    



 ... $ ("# LimitedOne") ($("# LimitedOne val ") Val () Substring (0, MAX_CHARS));



  



 Else {}



    



 $ ("# CharCounter") Html (Rest-).;



    



 var pv = Math.floor ((((MAX_CHARS-Remaining) / MAX_CHARS) * 100));



    



 . $ ('# Progress') Progressbar ('value', pv);



  



 }







 }

Wir analysieren den Code ein: die erste Zeile in checkTextareaLength wird der aktuelle Wert des textarea von val function () jQuery, dann zählen die Anzahl der Zeichen durch das Lesen der Länge Attribut eingetragen.
In der nächsten Zeile wird die Anzahl der Zeichen für den Unterschied. An dieser Stelle gibt es 2 Möglichkeiten.

1. Verbleibende variable kleiner als Null ist (zum Beispiel nach einem copy / paste), der if-Block speichert den Wert des textarea und Grenzen es zu 255 Zeichen in der systemeigenen JavaScript substring

 



 ... $ ("# LimitedOne") ($("# LimitedOne val ") Val () Substring (0, MAX_CHARS));

 

2. Verbleibende größer als Null ist, sonst in den ersten span-Block wird mit der Anzahl der noch verfügbaren Zeichen erweitert:

 



 $ ("# CharCounter") Html (Rest-).;

 

Dann wird die Funktion berechnet das Verhältnis zwischen der maximalen Anzahl der verfügbaren Zeichen und die derzeit enthalten, die Bibliothek-Funktion Math.floor rundet das Ergebnis (nach unten) auf die nächste:

 



 var pv = Math.floor ((((MAX_CHARS-Remaining) / MAX_CHARS) * 100));

 

An dieser Stelle können wir nur den Wert in der Progressbar gefunden

 



 . $ ('# Progress') Progressbar ('value', pv);

 

Lassen Sie den Code, der auf dem DOM Bereit ausgeführt schreiben.
Wir initialisieren die Progressbar und führen Sie die binden Sie die Ereignisse abzufangen: Der Tastendruck, die mouseout, und ändern Sie die Unschärfe. Überwachen sie alle auf den Fall, dass der Benutzer sollte die Copy / Paste zu fangen.
Beachten Sie, dass die Funktion aufrufen um wenige Hundertstel einer Sekunde über die systemeigene Funktion setTimeout verzögert so sicher sein, immer den Wert zu gegebener Zeit, wenn der Benutzer mit dem Schreiben fertig.

 $ (Function () {



  



 $ ("# Progress") Progressbar ().;



  



 $ ("# LimitedOne.") Bind ("mouseout ändern Unschärfe Tastendruck", function () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>