のんびりしているエンジニアの日記

ソフトウェアなどのエンジニア的な何かを書きます。

JQueryでテキストエリアの文字数をカウントする

Sponsored Links

皆さんこんにちは
お元気ですか。私はほっとな気持ちとお肉食べたいとお魚食べたいで飢えてます

さて、本日はテキストエリアの文字を数えたいというニーズにお答えするような形の内容です。

やってみれば早いものです。

f:id:tereka:20140614180950p:plain

コードはこちら

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="./jquery.js"></script>
<title>textbox</title>
<textarea class='test'></textarea>
<p>0文字目</p>
<script>
$(function() {
  $('.test').bind('keydown keyup keypress change',function(){
  	$('p').html($(this).val().length + "文字目");
  });
});
</script>

解説をすると
bindでキーが押された、文字変化したなどのイベントを登録し、それが実行されたら動作がされるようなプログラムとなっています。
押された時にpのタグの文字が変化するだけの簡単なスクリプトとなっています。

気が向いたらdivでテキストエリアを作るようなことをやってみたいと思います。