Jakiś czas temu na pewnym forum znalazłem post z zapytaniem o możliwość ograniczenia ilości znaków, jakie można wpisać w pole <textarea>. Uznałem, że temat ten jest dosyć ciekawy, a sama metoda warta głębszego omówienia. Zwykły HTML nie dostarcza nam niestety żadnego atrybutu, który wykonywałby zadanie za nas. W celu rozwiązania problemu napiszemy krótki skrypt korzystający z biblioteki jQuery.
Jak to powinno działać
Skrypt po każdorazowym wpisaniu przez użytkownika jakiegoś znaku (bądź po jego usunięciu) powinien zliczać ile znaków jest wpisanych. Jeśli ilość tych znaków przekroczy nasz z góry ustalony limit to wtedy usuwamy nadmiar znaków wpisanych w nasze pole.
Funkcje, które powinny nas zainteresować:
- keyup() – sprawdza, czy w aktywnym polu wykonano jakąś akcje (wpisano/usunięto znak). Będzie to główny warunek wykonywania dalszych operacji.
- substring(od, do) – kopiuje znaki w danym polu od „od” do „do„. Skorzystamy z tej funkcji, jeśli ilość znaków w naszym polu przekroczy limit.
- Do pobrania ilości znaków w <textarea> wykorzystamy konstrukcje $(this).val().length.
Zabieramy się do pracy
[codesyntax lang=”javascript”]
<html> <head> <title>Jak ograniczyc ilosc znakow wpisanych w textarea</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var limit = 5; //ustalamy limit znakow $("#pozostalo").text(limit); //wypisujemy ten limit 'na dobry poczatek' $("#pole").keyup(function() { //jesli wpisano cos do naszego pola var ile_wpisano = $(this).val().length; //zliczamy ilosc znakow if(ile_wpisano > limit) { //jesli przekroczymy limit reset = $(this).val().substring(0, limit); //pobieramy znaki od pierwszego do ustalonego w limicie $(this).val(reset); //wypisujemy wczesniej pobrane znaki } $("#pozostalo").text(limit - $(this).val().length); //wypisujemy ile znakow pozostalo }); }); </script> </head> <body> <form action="" method="post"> <p> <textarea name="tresc" id="pole"></textarea><br /> Pozostalo znakow: <span id="pozostalo"></span> </p> </form> </body> </html>
[/codesyntax]
Uważam, że skrypt jest dosyć prosty i łatwy w implementacji. Można jednak pokusić się o napisanie małej funkcji, jeśli zamierzamy z takiego ograniczenia korzystać w więcej niż jednym miejscu.
Tworzymy funkcje do jQuery
Stworzenie nowej funkcji pod jQuery z pewnością przyczyni się do wygodniejszego korzystania z naszego skryptu. Zapiszmy nowy plik pod nazwą jquery.ograniczaj-0.1.js.
[codesyntax lang=”javascript”]
/* * Ograniczaj - jQuery Plugin * Textarea limit chars * * Examples at: http://blog.grabowski.ostrowwlkp.pl/demo/webmastering/textarea2.html * * Copyright (c) 2011 - Hubert Grabowski (http://blog.grabowski.ostrowwlkp.pl/) * * Version: 0.1 (31/12/2011) * Requires: jQuery v1.7.1+ and maybe low * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html */ ;(function($) { //safety ;) $.fn.ograniczaj = function(limit, pole) { //deklaracja funkcji if(pole) { //jesli podano pole - argument opcjonalny $(pole).text(limit); //wypisujemy ten limit 'na dobry poczatek' } $(this).keyup(function() { //jesli wpisano cos do naszego pola var ile_wpisano = $(this).val().length; //zliczamy ilosc znakow if(ile_wpisano > limit) { //jesli przekroczymy limit reset = $(this).val().substring(0, limit); //pobieramy znaki od pierwszego do ustalonego w limicie $(this).val(reset); //wypisujemy wczesniej pobrane znaki } if(pole) { //j/w $(pole).text(limit - $(this).val().length); //wypisujemy ile znakow pozostalo } }); } })(jQuery);
[/codesyntax]
Nasz kod HTML będzie wyglądał teraz tak:
[codesyntax lang=”html4strict”]
<html> <head> <title>Jak ograniczyc ilosc znakow wpisywanych w textarea</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery.ograniczaj-0.1.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#pole").ograniczaj(10, "#pozostalo"); $("#pole2").ograniczaj(20, "#pozostalo2"); }); </script> </head> <body> <form action="" method="post"> <p> <textarea name="tresc" id="pole"></textarea><br /> Pozostalo znakow: <span id="pozostalo"></span> </p> <p> <textarea name="tresc2" id="pole2"></textarea><br /> Pozostalo znakow: <span id="pozostalo2"></span> </p> </form> </body> </html>
[/codesyntax]
Oczywiście bez problemów można wykorzystać powyższe skrypty w swoich projektach na licencji MIT/GPL.
Równie dobrze – po przekroczeniu wartości – np. 10 – tekst może się zmieniać – przekroczyłeś ilość znaków o: ilość_znaków;
Do tego – po zmianie na przekroczyłeś ilość znaków – można zrobić, iż guzik (zakładamy, iż będzie to post) – zrobi się nieaktywny, dzięki czasu nie będziemy mogli wysłać posta przekraczającego daną ilość znaków.