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ć:

  1. keyup() – sprawdza, czy w aktywnym polu wykonano jakąś akcje (wpisano/usunięto znak). Będzie to główny warunek wykonywania dalszych operacji.
  2. 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.
  3. Do pobrania ilości znaków w <textarea> wykorzystamy konstrukcje $(this).val().length.
Dodatkowo stworzymy selektor, w którym będziemy wyświetlać ilość znaków, które pozostały do wpisania. Obliczymy to przy pomocy zwykłego odejmowania limit – $(this).val().length.

 

Zabieramy się do pracy

<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>

DEMO

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.

/*
 * 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);

DEMO

Nasz kod HTML będzie wyglądał teraz tak:

<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>

DEMO

Oczywiście bez problemów można wykorzystać powyższe skrypty w swoich projektach na licencji MIT/GPL.

 

 

Przeczytaj także: