Magazyn T3
newsy, felietony, testy i tutoriale



Internet Maker

30/07/2008
0 komentarzy »

JavaScript: Limit znaków w formularzu

Więcej artykułów autorstwa »
Napisane przez: Tomasz Galanciak
Tagi: ,
ce-javascript_limit_znakow_w_formularzu.gif

Potrafimy już stworzyć licznik znaków wpisanych do określonych pól formularza. Teraz trochę poeksperymentujemy, dodając funkcjonalność podobną np. do serwisu SMS Orange (http://sms.orange.pl). Chodzi o limit znaków w elementach textarea.

Na początku ustalamy dozwoloną liczbę znaków, którą będzie można wpisać do formularza. Po przekroczeniu tego limitu wyświetli się ostrzeżenie, a wartość formularza wróci do stanu przed jego przekroczeniem.

Dysponujemy dokumentem HTML (listing 1): 

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\">
<head>
<title>Strona z formularzem</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
 
<style type=\"text/css\">
 
label
{
   display: block;
   margin: 2px;
}
 
</style>
 
<!-- Nasz kod Javascript: -->
 
<script type=\"text/javascript\">
window.onload = Laduj;
 
function Laduj()
{
   document.forms[\'dodawanie_posta\'].onsubmit = Verify;
   document.forms[\'dodawanie_posta\'].content.onkeyup = Licz;
}
 
function Licz()
{
   var odnosnik = document.getElementById(\'licznik_znakow\');
   var liczba_znakow = document.forms[\'dodawanie_posta\'].content.value.length;
 
   odnosnik.innerHTML = \"Liczba wpisanych znaków:\"+liczba_znakow;
 
}
 
function Verify()
{
   var nick = document.forms[\'dodawanie_posta\'].nick.value;
   var content = document.forms[\'dodawanie_posta\'].content.value;
   var error = false;
 
   if (nick == \"\")
   {
      document.forms[\'dodawanie_posta\'].nick.style.border = \"2px solid #FF0000\";
      alert(\'Nie wypełniłeś pola z nickiem!\');
      error = true;
 
   }
   else
   {
      document.forms[\'dodawanie_posta\'].nick.style.border = \"1px solid #000000\";
   }
 
   if (content == \"\")
   {
      document.forms[\'dodawanie_posta\'].content.style.border = \"2px solid #FF0000\";
      alert(\'Nie wypełniłeś pola z treścią!\');
      error = true;
   }
   else
   {
      document.forms[\'dodawanie_posta\'].content.style.border = \"1px solid #000000\";
   }
 
   if (error)
   {
      return false;
   }
 
}
</script>
</head>
<body>
   <form method=\"post\" action=\"\" name=\"dodawanie_posta\">
    <label>Nick: <input type=\"text\" name=\"nick\" value=\"\" /></label>
    <label>Tresc <textarea name=\"content\" rows=\"5\" cols=\"20\"></textarea>
    <div id=\"licznik_znakow\"></div> <!-- o tutaj -->
    </label>
    <input type=\"submit\" value=\"dodaj\" />
   </form>
</body>
</html>

Z listingu tego wynika, że po wpisaniu jakiegokolwiek znaku z klawiatury w polu Treść wykona się funkcja Licz. Ta z kolei odpowiedzialna jest za policzenie wszystkich znaków ze wspomnianego elementu formularza. Ich liczbę pokazuje w:

1

<div id=\"licznik_znakow\"></div>

W związku z tym funkcja musi „wiedzieć”, jaki jest limit znaków. Przedstawmy go w postaci zmiennej o nazwie np. limit. Musimy teraz postanowić, jaką wartość będzie mieć ta zmienna, czyli ile znaków będzie można wpisać w pole Treść. Powiedzmy, że będzie to 500 znaków. Czas teraz na uzupełnienie funkcji Licz o tę zmienną:

1
2
3
4

function Licz()
{
   var limit = 500;
   // pozostała część funkcji

W ten sposób funkcja Licz ma dostęp do wartości zmiennej o nazwie limit. Gdybyśmy jednak chcieli, aby wszystkie funkcje w skrypcie mogły z niej korzystać, należy zmienną zdefiniować poza kodem funkcji, czyli tam, gdzie mamy np. window.onload = Laduj;. Wyglądałoby to tak:

1
2
3

<script type=\"text/javascript\">
window.onload = Laduj;
var limit = 500;

Warto zobaczyć działanie tej właściwości na przykładzie oderwanym od kontekstu:

1
2
3
4
5
6
7
8
9
10
11

var liczba = 2;
function PokazLiczbe()
   {
   alert(liczba);
   }
function PokazLiczbe2()
   {
   alert(liczba);
   }
PokazLiczbe();
PokazLiczbe2();

W powyższym kodzie mamy dwie funkcje: PokazLiczbe i PokazLiczbe2, które wyświetlają w okienku alert(); zawartość zmiennej liczba (zauważmy, że zdefiniowaliśmy ją poza ciałem obu funkcji). Mimo wszystko będą one mieć do niej dostęp i wyświetli się w obu przypadkach wartość 2, właśnie dlatego, że została zdefiniowana poza ciałem obydwu funkcji. W tym przypadku będzie już jednak inaczej:

1
2
3
4
5
6
7
8
9
10
11

function PokazLiczbe()
{
   var liczba = 2;
   alert(liczba);
}
function PokazLiczbe2()
{
   alert(liczba);
}
PokazLiczbe();
PokazLiczbe2();

Tutaj zdefiniowaliśmy zmienną liczba (var liczba= 2;) w ciele funkcji PokazLiczbe. Efekt jest taki, że za pierwszym razem ujrzymy okienko z cyfrą dwa (właśnie po wywołaniu funkcji PokazLiczbe). W drugim przypadku, kiedy wywołamy funkcję PokazLiczbe2, która także chce wyświetlić wartość zmiennej liczba, ujrzymy błąd. Funkcja ta bowiem nie ma dostępu do tej zmiennej, która zdefiniowana jest tylko dla funkcji PokazLiczbe.

Wracamy do naszego przykładu. Kiedy wpiszemy cokolwiek w pole Treść, wywołuje się funkcja Licz. Ponieważ chcemy uzyskać liczbę znaków, jaka pozostała do wyczerpania limitu, logika nakazuje odjąć od limitu znaków te, które już wpisaliśmy. Liczbę tę mamy zapisaną dzięki konstrukcji:

1

var liczba_znakow = document.forms[\'dodawanie_posta\'].content.value.length;

Mamy także limit znaków (pod zmienną limit), więc pora wykonać odejmowanie. Wartość tego działania zapiszemy do nowej zmiennej, np. o nazwie reszta:

1
2
3
4
5
6

function Licz()
{
   var limit = 500;
   var odnosnik = document.getElementById(\'licznik_znakow\');
   var liczba_znakow = document.forms[\'dodawanie_posta\'].content.value.length;
   var reszta = limit - liczba_znakow;

Otrzymaliśmy liczbę znaków, która została do wykorzystania w naszym polu formularza. Teraz pozostaje sprawdzenie jej wartości. Musimy bowiem zablokować możliwość pisania w formularzu, kiedy reszta będzie ujemna i przywrócić wartość pola Treść przed wpisaniem 501 znaku. Jeśli jednak reszta będzie dodatnia, czyli możliwe będzie wpisanie czegokolwiek, musimy dowiedzieć się, ile znaków pozostało jeszcze do wykorzystania.

Użyjemy do tego warunku if, by sprawdzić wartość reszty:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function Licz()
{
   var limit = 500;
   var odnosnik = document.
   getElementById(\'licznik_znakow\');
   var liczba_znakow = document.forms[\'dodawanie_posta\'].content.value.length;
   var reszta = limit - liczba_znakow;
   if (reszta < 0)
   {
   }
   else
   {
   }
}

Dodaliśmy poniższy kod:

1
2
3
4
5
6

if (reszta < 0)
{
}
else
{
}

To, co zrobimy teraz z tym fragmentem, można przetłumaczyć następująco:

Jeśli zmienna reszta będzie mniejsza od zera (czyli zostanie przekroczony limit), wyświetl ostrzeżenie o przekroczeniu limitu znaków oraz usuń z formularza znaki przez które został przekroczony limit. Jeśli zmienna reszta będzie dodatnia, pokaż ile znaków zostało do wykorzystania, czyli wyświetl wartość zmiennej reszta.

Pora więc dodać określone właściwości. Najpierw ostrzeżenie o przekroczeniu limitu:

1
2
3
4

if (reszta < 0)
{
   alert(\'Wpisałeś za dużo znaków!\');
   zmienna.substring(x, y);

Jeśli przekroczyliśmy limit wpisanych znaków, to w naszym textarea znajduje się ich więcej niż wynosi limit. Trzeba zatem odjąć tyle znaków, o ile został on przekroczony. Pomoże w tym funkcja substring, która potrafi wyciąć pewną liczbę znaków z konkretnego ich ciągu. Zobaczymy to na prostym przykładzie: z wyrazu Barbara wytniemy pierwsze trzy litery, czyli znaki od pierwszego do trzeciego (wyraz Bar).

1
2

var slowo = \"Barbara\";
alert(slowo.substring(0, 3));

W ten sposób ujrzymy w okienku słówko Bar.

Stosując substring w naszym przykładzie, otrzymamy następujący kod:

1
2
3
4
5

if (reszta < 0)
   {
   alert(\'Wpisałeś za dużo znaków!\');
   document.forms[\'dodawanie_posta\'].content.value =    document.forms[\'dodawanie_posta\'].content.value.substring(0, 500);
}

Dodaliśmy ten fragment:

1

document.forms[\'dodawanie_posta\'].content.value = document.forms[\'dodawanie_posta\'].content.value.substring(0, 500);

W ten oto sposób ustawiamy wartość pola textarea o name=”content” na 500 pierwszych znaków, które wpisaliśmy do tej pory. Ponieważ zmienna limit ma wartość 500, możemy podstawić ją do substring. Otrzymamy:

1

document.forms[\'dodawanie_posta\'].content.value = document.forms[\'dodawanie_posta\'].content.value.substring(0, limit);.

Pora teraz zająć się sytuacją, kiedy limit znaków nie zostanie przekroczony. Uzupełnijmy więc konstrukcję else o kod wyświetlający ile znaków zostało do wyczerpania limitu. Ich liczbę mamy już dzięki różnicy, której wynik zapisaliśmy do zmiennej reszta.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function Licz()
{
   var limit = 500;
   var odnosnik = document.getElementById(\'licznik_znakow\');
   var liczba_znakow = document.forms[\'dodawanie_posta\'].content.value. length;
   var reszta = limit - liczba_znakow;
   if (reszta < 0)
   {
   alert(\'Wpisałeś za dużo znaków!\');
   document.forms[\'dodawanie_posta\'].content.value = document.forms [\'dodawanie_posta\'].content.value.substring(0, limit);
   }
   else
   {
   odnosnik.innerHTML = \"Pozostało \"+reszta+ \" znaków\";
   }
}

Dodaliśmy:

1

odnosnik.innerHTML = \"Pozostało \"+reszta+ \" znaków\";

Dzięki temu wartość diva, którego odnośnik pobraliśmy do zmiennej odnosnik, ma wartość Pozostało x znaków, gdzie x to zawartość naszej zmiennej o nazwie reszta. Aby ją wyświetlić, otoczyliśmy ją dwoma plusami i cudzysłowami. Tak wplata się zmienne pomiędzy ciągi znaków, np.:

1
2
3

var slowo = \"Barbara\";
var zdanie = \"Imię\" +slowo+ \" jest ładne\";
alert(zdanie);

wyświetli nam Imię Barbara jest ładne. W ten sposób doszliśmy do finału. Nasz dokument wygląda tak jak na listingu 2.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\">
<head>
<title>Strona z formularzem</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
 
<style type=\"text/css\">
 
label
{
   display: block;
   margin: 2px;
}
 
</style>
 
<!-- Nasz kod Javascript: -->
 
<script type=\"text/javascript\">
window.onload = Laduj;
 
function Laduj()
{
   document.forms[\'dodawanie_posta\'].onsubmit = Verify;
   document.forms[\'dodawanie_posta\'].content.onkeyup = Licz;
}
 
function Licz()
{
   var limit = 500;
   var odnosnik = document.getElementById(\'licznik_znakow\');
   var liczba_znakow = document.forms[\'dodawanie_posta\'].content.value.length;
 
   var reszta = limit - liczba_znakow;
 
   if (reszta < 0)
   {
      alert(\'Wpisałeś za dużo znaków!\');
      document.forms[\'dodawanie_posta\'].content.value = document.forms[\'dodawanie_posta\'].content.value.substring(0, limit);
   }
   else
   {
      odnosnik.innerHTML = \"Pozostało \" +reszta+ \" znaków\";
   }
 
}
 
function Verify()
{
   var nick = document.forms[\'dodawanie_posta\'].nick.value;
   var content = document.forms[\'dodawanie_posta\'].content.value;
   var error = false;
 
   if (nick == \"\")
   {
      document.forms[\'dodawanie_posta\'].nick.style.border = \"2px solid #FF0000\";
      alert(\'Nie wypełniłeś pola z nickiem!\');
      error = true;
 
   }
   else
   {
      document.forms[\'dodawanie_posta\'].nick.style.border = \"1px solid #000000\";
   }
 
   if (content == \"\")
   {
      document.forms[\'dodawanie_posta\'].content.style.border = \"2px solid #FF0000\";
      alert(\'Nie wypełniłeś pola z treścią!\');
      error = true;
   }
   else
   {
      document.forms[\'dodawanie_posta\'].content.style.border = \"1px solid #000000\";
   }
 
   if (error)
   {
      return false;
   }
 
}
</script>
</head>
<body>
   <form method=\"post\" action=\"\" name=\"dodawanie_posta\">
    <label>Nick: <input type=\"text\" name=\"nick\" value=\"\" /></label>
    <label>Tresc <textarea name=\"content\" rows=\"5\" cols=\"20\"></textarea>
    <div id=\"licznik_znakow\"></div> <!-- o tutaj -->
    </label>
    <input type=\"submit\" value=\"dodaj\" />
   </form>
</body>
</html>

Może Cię zainteresować:

  1. JavaScript: Prosta walidacja formularzy
  2. JavaScript: Dynamiczne dodawanie elementów formularza


O autorze

Tomasz Galanciak

Więcej artykułów autorstwa »


0 komentarzy »

 

Nowy numer

 

Muzyka jest jedną z moich największych pasji – nic więc dziwnego, że z dużą radością oddaję ten numer w ręce czytelników. W nim bowiem wiodącym tematem jest właśnie muzyka: czego słuchamy, na jakim sprzęcie, jak zmieniała się jej promocja na przestrzeni lat oraz jak ją… kradniemy. W związku z powolnym acz sukcesywnym zbliżaniem się lata, przedstawiamy również 30 kroków jak być w nienagannej formie, gdy już prawdziwie upalne dni zawitają do Polski. Nie zapominamy jednocześnie o gadżetach: testujemy m.in. nowy, topowy smartfon od HTC: One X oraz budżetowe laptopy – by niedrogim kosztem nie rozstawać się z elektroniką również na urlopie.

 

Partnerzy

 



0 komentarzy


Skomentuj pierwszy!


Zostaw odpowiedź

Twój adres nie zostanie opublikowany. Wymagane pola są oznaczone *

*

Możesz używać tych tagów i atrybutów HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">