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.