jQuery: zliczanie i limit znaków

Autor: Arkadiusz Tobiasz 10 maja 2010

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
<div>
<div id="count">145</div>
<div id="barbox"><div id="bar"></div></div>
</div>
<textarea id="contentbox"></textarea>

Skrypt w działaniu możecie zobaczyć tutaj.

komentarze 2

  1. win3tou napisał(a):

    Spoko skrypcik.:)
    Wiesz może jak pobrać zawartość pola textarea?

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]