Jak ograniczyć ilość znaków wpisywanych w textarea

Sty 13
2012

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.

 

 

Jeden komentarz w “Jak ograniczyć ilość znaków wpisywanych w textarea”

  1. Gość napisał/a:

    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.

Pozostaw odpowiedź Gość Anuluj pisanie odpowiedzi

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *