jQuery: pasek postępu, aby pokazać "szpachlowanie" w textarea

Często problemy wydają się łatwe do rozwiązania, okazać się najbardziej trudniejsza niż się spodziewano, i to, że zazwyczaj nie ma do stracenia pół dnia pracy spróbuj wydostać mniej lub bardziej ortodoksyjnych i gorączkowe konsultacje internetowe, desperacko kogoś, kto już w obliczu problem.

Jeżeli projekt miałem potrzebę ograniczenia liczby znaków w textarea Myślałem, że jestem rozwiązany w ciągu kilku minut, tak nie było, znalazłem kilka rozwiązań w sieci, ale nie przekonuje mnie do końca, więc postanowiłem implementować niestandardowe coś za pomocą jQuery i doskonałe jQueryUI , w szczególności element progessbar pakietu.

Odzyskiwanie plików potrzebne

Colleghiamoci do http://jqueryui.com/ i kliknij na przycisk "pobierz zamówienie Build" w prawym górnym rogu.
Na następnej stronie wybierz użytecznych składników, a jedną z dostępnych widgetów zdecydujemy się podjąć jedynie progressbar.

Mamy do wyboru szablon graficzny z rozwijanej listy po prawej stronie i kliknij "Pobierz". Rozpakuj pakiet po prostu pobrać i znajdują się trzy foldery i plik w katalogu:

• folderze css zawierający motyw, w naszym przypadku domyślne, ui-lekkość
• rozwój Pakiet zawiera przykłady i dokumentację
• js: zawiera dwa pliki potrzebne do uruchomienia naszego rozwiązania; jquery i jquery-ui-1.4.4.min.js-1.8.9.custom.min.js
• index.html: strona, która pozwala nam zobaczyć przykład tematyczne / widżetów, które wybraliśmy

Dla naszych małych przykład stworzyć prostą strukturę w następujący sposób:

• rozpakowany folder jQueryUI (jquery-ui-1.8.9.custom)
• plik.html pakiet zawierający textarea
• file.js zawierający kod jQuery

Tworzymy plik HTML, nadać mu nazwę opisową (nazwijmy mrw_jquery_txtcheck.html) i wstawić w wtrąceń tag głowy konieczne: link do tematu css i js jQuery i 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>

Dodaj textarea w organizmie:

 



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

 

Następnie włóż div, który zawiera progressbar i zastępczy, aby dać wyobrażenie o ile znaki są również numeryczne.

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







 Dostępny <p> <span id="charCounter"> 255 </ span> znaków. </ P>

Teraz możemy przystąpić do pisania kodu w osobnym pliku JavaScript / jQuery niezbędne funkcje, które również zawierają go w tagu głowy, będziemy nazywać check_textarea.js.
Przede wszystkim określenia podstawowych zmiennych znaków, a te dostępne mają taką samą wartość na początku:

 MAX_CHARS = 255;







 Pozostałe = MAX_CHARS;

Następnie definiujemy funkcję, która kontroluje i poprawia progressbar i przeciw:

 Funkcja checkTextareaLength () {





  



 current_length == undefined var = $ ("# limitedOne"). val (). długości?

 



 0: $ ("# limitedOne") Val () Długość;..



  



 Pozostałe = (MAX_CHARS - current_length);



	

  



 if (Pozostałe> 0) {

	

    



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



  



 Else {}



    



 $ ("# CharCounter") HTML (pozostałe).;



    



 var pv = Math.floor ((((MAX_CHARS-Pozostałe) / MAX_CHARS) * 100));



    



 . $ ("Postęp # ') Pasek postępu (" wartości ", pv);



  



 }







 }

Przeanalizujmy kod: pierwsza linia w checkTextareaLength pobiera bieżącą wartość textarea za pomocą val () funkcja jQuery, a następnie policzyć liczbę znaków wprowadzonych przez czytanie atrybut długości.
W następnej linii podaje liczbę znaków dostępnych dla różnicy. W tym miejscu są 2 możliwości.

1. Pozostałe zmiennej jest mniejsza od zera (np. po kopiuj / wklej), jeśli blok podnosi wartość textarea i ogranicza ją do 255 znaków za pomocą macierzystego substring JavaScript

 



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

 

2. Pozostała jest większa od zera, w przeciwnym wypadku blok w pierwszej rozpiętość jest wzbogacony o liczbę znaków, po lewej:

 



 $ ("# CharCounter") HTML (pozostałe).;

 

Następnie oblicza stosunek maksymalnej liczby znaków dostępnych i tych, które obecnie włączone, rund funkcji biblioteki Math.floor wynik (w dół) z dokładnością do:

 



 var pv = Math.floor ((((MAX_CHARS-Pozostałe) / MAX_CHARS) * 100));

 

W tym momencie możemy przypisać tylko wartość znaleziono w progressbar

 



 . $ ("Postęp # ') Pasek postępu (" wartości ", pv);

 

Napiszmy że kod jest wykonywany na DOM Ready.
Inicjalizujemy wiążą progressbar i przeprowadzenia imprezy, które chcesz przechwycić: naciśnięcia klawisza, mouseout, zmiany i rozmycia. Monitorowania ich wszystkich do przechwytywania zdarzeń, że użytkownik powinien korzystać z opcji kopiuj / wklej.
Zauważ, że wywołanie funkcji jest przesunięty o kilka setnych sekundy przez macierzyste setTimeout funkcji, tak więc należy zawsze mieć wartość w odpowiednim czasie, kiedy użytkownik skończy pisać.

 $ (Function () {



  



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



  



 $ ("# LimitedOne.") Bind ("naciśnięcie klawisza zmiany mouseout blur ', function () {



    



 setTimeout ("checkTextareaLength ()", 200);



  



 });







 });

• <<
• 1
• 2
• >>