Здравствуйте. В этом уроке Вы узнаете, как можно с помощью jQuery подсчитать количество введенных слов в форму. Я считаю, что этот урок будет очень интересен, поэтому советую хорошенько изучить его! Ниже вы можете просмотреть демонстрацию получившегося меню и скачать исходные файлы урока:
Шаг 1. HTML-каркас.
Ну, в общем-то, как и всегда, начнем с создания каркаса. Выглядеть оно будет очень просто, примерно так, как изобразил его я ниже:
HTML:
<div id="container">
<div>
<p><br />
<textarea name="word_count" id="word_count" cols="30" rows="6"></textarea>
</p>
<p>
<span style="color:#FF0000"> Кол-во введенных Вами слов : <span id="display_count">0</span></span>
</p>
</div>
</div>
Шаг 2. "Привязка" основного фреймворка jQuery
Конечно же, как и в любом уроке по jQuery, мы не обойдемся без основного фреймворка. Этот файл я выложил также в исходниках. "Привязывать" его к нашему документу с нашей формой мы будем следующим образом, между тегами <head> и </head>:
<script src="jquery.js" type="text/javascript"></script>
Шаг 3. jQuery - доработки.
Теперь, собственно, мы будем делать сам счетчик введенных слов, состоящий из небольшого jQuery-кода. Добиться этого можно, прописав нижеприведенный код перед закрытием тега body:
<script type="text/javascript">
jQuery.fn.wordCount = function(params){ var p = {
counterElement:"display_count"
};
var total_words;
if(params) {
jQuery.extend(p, params);
}
this.keypress(function()
{
total_words=this.value.split(/[\s\.\?]+/).length;
jQuery('#'+p.counterElement).html(total_words);
});
};
</script>
Заключение.
На этом наш счетчик полностью готов. Теперь Вы можете просмотреть свой результат. Надеюсь Вам урок очень понравился, жду Ваших комментариев.