jQuery: zliczanie i limit znaków

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.

Comments

win3tou

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

Reply
    Arkadiusz Tobiasz

    dla textarea o id=”description”:

    $(‚#description”).text();

    Reply

Leave a Comment

one × two =