Вероятно, вы уже сталкивались с этой проблемой, так как здесь не работает параметр maxlength. В сегодняшней статье мы расскажем вам о том, как реализовать это в jQuery.
Суть заключается в том, что система будет пересчитывать символы в поле каждый раз, как вы вводите один знак. В то же время, будет просчитываться разница между максимальным допустимым значением и актуальным числом знаков в поле, за счет чего будет отображаться индикатор оставшегося возможного числа знаков. Вы можете ознакомиться с результатом на странице с примером.
Важность проверки форм
Здесь суть заключается в том, чтобы клиенту было гораздо удобнее пользоваться вашим веб-сайтом. Именно для этого и нужна проверка форм. Важно учитывать то, что посетители часто не обращают внимание на проверку, так что проверка в реальном времени на стороне сервера (формат, длина и так далее) очень важна. Говоря это, мы можем переходить к делу.
Настройка страницы
Давайте начнем с создания поля ввода текста на новой странице HTML. Далее мы добавим пустой div (#counter), который будет содержать в себе индикатор оставшегося возможного числа знаков.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// here we will write-up the function
});
</script>
</head>
<body>
<form id="input_form" method="POST" action="?">
<textarea id="text"></textarea>
<input type="submit" value="submit">
</form>
<div id="counter"></div>
</body>
</html>
Теперь нам нужно расписать функцию. Давайте начнем с определения переменной знака, которая будет определять максимальное число символов в поле. Итак, напишите это в элементе счетчика.
var characters= 100;
$("#counter").append("You have <strong>"+ characters+"</strong> characters remaining");
Теперь каждый раз, когда будет происходить событие keyup (каждое нажатие клавиши), будет производиться проверка:
$("#text").keyup(function(){
if($(this).val().length > characters){
$(this).val($(this).val().substr(0, characters));
}
Такая проверка может казаться очень сложной, но далее мы увидим, что все очень просто.
С помощью $(this).val() мы извлекаем содержимое textarea (в момент нажатия клавиши), а length предоставляет нам данные о количестве символов. Если это количество больше, чем мы указали в переменной (в нашем случае это 100), то содержимое textarea будет таким же, как и textarea, которая проведена через функцию substr с параметром 0.
Функция substr вырезает часть строки; параметры, в которых определяется, где начинаются и заканчиваются символы, вырезаются. В нашем случае, начало на 0 (начало строки), а конец на 100 (100 символов).
В целом: если строка, содержащаяся в textarea больше значения, которое мы указали, то строка будет урезана до указанного значения максимального количества символов.
Теперь давайте заменим значение числом оставшихся возможных знаков:
var remaining = characters - $(this).val().length;
$("#counter").html("You have <strong>"+ remaining+"</strong> characters remaining");
Здесь мы просто вычитаем число символов, вписанных в textarea, а полученное число впишем в элемент с информацией об оставшихся символах.
Давайте добавим небольшой трюк. Если число оставшихся символов менее 10, то индикатор будет отображен красным цветом:
if(remaining <= 10)
{
$("#counter").css("color","red");
}
else
{
$("#counter").css("color","black");
}
В итоге скрипт должен представлять нечто вроде этого:
$(document).ready(function() {
var characters = 220;
$("#counter").append("You have <strong>"+ characters+"</strong> characters remaining");
$("#text").keyup(function(){
if($(this).val().length > characters){
$(this).val($(this).val().substr(0, characters));
}
var remaining = characters - $(this).val().length;
$("#counter").html("You have <strong>"+ remaining+"</strong> characters remaining");
if(remaining <= 10)
{
$("#counter").css("color","red");
}
else
{
$("#counter").css("color","black");
}
});
});
jQuery: логика расширений
Теперь у нас есть скрипт, который мы можем использовать не один раз, и очень даже логичным будет то, чтобы сделать из этого плагин.
Давайте начнем с настройки структуры плагина:
(function($){
$.fn.limit = function(options) {
Наш метод называется limit и он может запускать различные параметры. Давайте начнем с установки значений по умолчанию
var defaults = {
limit: 200,
id_result: false,
alertClass: false
}
Как видите, параметры представляют собой максимальное значение символов, id элемента, которое заключает в себе данные об оставшихся символах (по умолчанию этого нет), и класс CSS, который определяет цвет (и/или другие параметры), которым отображается индикатор, если показатель ниже 10 символов.
Такой метод будет правильным. По крайней мере, лучше того, что мы видели до этого момента. По факту, никто не говорил, что текст обязательно должен становиться красным. Или кто сказал, что текст вообще должен всегда быть черным? В данном случае, мы не будем пользоваться методам CSS, а вместо этого применим addClass и removeClass, за счет чего мы сможем настраивать параметры прямо в css-файле.
Теперь, давайте расширим круг возможных опций:
var options = $.extend(defaults, options);
Теперь давайте напишем функцию, следящую за высвечиванием данных только тогда, когда параметр id_result был изменен:
return this.each(function() {
var characters = options.limit;
if(options.id_result != false)
{
$("#"+options.id_result).append("You have <strong>"+ characters+"</strong> characters remaining");
}
$(this).keyup(function(){
if($(this).val().length > characters){
$(this).val($(this).val().substr(0, characters));
}
if(options.id_result != false)
{
var remaining = characters - $(this).val().length;
$("#"+options.id_result).html("You have <strong>"+ remaining+"</strong> characters remaining");
if(restanti <= 10)
{
$("#"+options.id_result).addClass(options.alertClass);
}
else
{
$("#"+options.id_result).removeClass(options.alertClass);
}
}
});
});
Вот итоговая версия плагина:
(function($){
$.fn.limit = function(options) {
var defaults = {
limit: 200,
id_result: false,
alertClass: false
}
var options = $.extend(defaults, options);
return this.each(function() {
var characters = options.limit;
if(options.id_result != false)
{
$("#"+options.id_result).append("You have <strong>"+ characters+"</strong> characters remaining");
}
$(this).keyup(function(){
if($(this).val().length > characters){
$(this).val($(this).val().substr(0, characters));
}
if(options.id_result != false)
{
var remaining = characters - $(this).val().length;
$("#"+options.id_result).html("You have <strong>"+ remaining+"</strong> characters remaining");
if(remaining <= 10)
{
$("#"+options.id_result).addClass(options.alertClass);
}
else
{
$("#"+options.id_result).removeClass(options.alertClass);
}
}
});
});
};
})(jQuery);
Теперь, если мы хотим при помощи плагина добиться результата, который мы видели в первой части, нам придется включить плагин и немного подредактировать код (не забудьте создать класс css):
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript" src="jquery.limit.js"></script>
<style>
.alert{
color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#testo").limit({
limit: 100,
id_result: "counter",
alertClass: "alert"
});
});
</script>
Скачать архив с файлами
* Версия 1.0, Файл издан: 16 мая 2010, Размер: 912 байт
Внимание! У вас нет прав для просмотра скрытого текста.
