Jakiś czas temu pokazałem jak przy użyciu JavaScriptu zrobić prosty licznik znaków wpisanych do pola typu textarea oraz jak ograniczyć ilość znaków tam wpisywanych. Dzisiaj skrypt o podobnej funkcjonalności z wykorzystanie tym razem biblioteki jQuery. Ponadto limit wykorzystania dopuszczalnych znaków będzie pokazywany graficznie w postaci progress bara.Rozpoczynamy od ściągnięcia biblioteki jQuery, którą uploadujemy na nasz serwer. Nie zapomnij podmienić ścieżki do niej w poniższym kodzie, który umieszczamy w sekcji <head>…</head> naszego skryptu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#contentbox").keyup(function() { var max = 145 var box=$(this).val(); var main = box.length *100; var value= (main / max); var count= max - box.length; if(box.length <= max) { $('#count').html(count); $('#bar').animate( { "width": value+'%', }, 1); } else { $(this).val($(this).val().substring(0,max - 1)); } return false; }); }); </script> |
Krótki komentarz:
$(‘#contentbox’).keyup(function(){} – contentbox to ID naszego pola textarea.
$(this).val() – wykorzystujemy kiedy chemy otrzymać wartość pola textarea.
#bar – to ID naszego progress bara do zliczania znaków.
$(‘#bar’).animate() – zmienia „postęp” naszego progress bara.
var max = 145 – pozwala na ustalenie limitu znaków, w naszym skrypcie to 145 znaków.
$(‘#count’).html(count); – div o id count pokazuje ilość znaków przez nas wpisanych.
$(this).val($(this).val().substring(0,max – 1)); – w przypadku, gdy liczba znaków przekracza dopuszczalny limit wartość naszego pola textarea jest obcinana do 145 pierwszych znaków.
Pozostały jeszcze dwie kwestie styl i formularz, w którym będzie pole textarea ze zliczaniem znaków. Plik stylu wygląda tak:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | #bar { background-color:#5fbbde; width:0px; height:16px; } #barbox { float:right; height:16px; background-color:#FFFFFF; width:100px; border:solid 2px #000; margin-right:3px; -webkit-border-radius:5px;-moz-border-radius:5px; } #count { float:right; margin-right:8px; font-family:'Georgia', Times New Roman, Times, serif; font-size:16px; font-weight:bold; color:#666666 } #contentbox { width:450px; height:50px; border:solid 2px #006699; font-family:Arial, Helvetica, sans-serif; font-size:14px; } |
Natomiast nasz formularz wygląda następująco:
1 2 3 4 5 |
Skrypt w działaniu możecie zobaczyć tutaj.
Popularity: 2%
Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. 
