IT

超簡単!文字数カウンターをHTMLとjavascriptで自作する!

超簡単!文字数カウンターをHTMLとjavascriptで自作する!

title(タイトル)やmeta(メタ)のdescription(ディスクリプション)などを考える時、文字数のカウントをサクっとやってくれるやーつ。ググれば腐るほどサイトやツールも見つかります。別にWordやExcelでも文字数はわかりますし、WordPress(ワードプレス)なら下に表示されるし。

でもまぁ、いつも見てる自分サイトにそれがあれば便利だし、javascriptソースコードも超簡単なので勉強ついでにちょっとやってみましょう。アンケートフォームとかにも応用出来そうですからね。

スポンサーリンク

HTMLソースコード

<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="robots" content="noindex,nofollow">
<script type="text/javascript" src="js/text_count.js"></script>
<title>テキストカウント</title>
<style type="text/css">
div.text_count_pc p {
	font-size:120%;
	font-weight:bold;
	margin:5px 5px 0px;
}
div.text_count_pc p span {
	display:inline;
}
</style>
</head>
<body>
<div class="text_count_pc">
<h1>文字数カウント</h1>
<span>下記に文字を入力してください</span><br>
<textarea cols="40" rows="8" onkeyup="ShowLength(value);"></textarea>
<p>現在<span id="inputlength">0文字</span></p> 
</div>
</body>
</html>

javascriptソースコード

function ShowLength( str ) {
	document.getElementById("inputlength").innerHTML = str.length + "文字";
}

超簡単ですよね。そうです。こんな簡単なプログラムでニタニタしている程度のWEBクリエイターです。でも、こういった簡単なパーツの組み合わせが大きなシステムになるんですよ。

この記事があなたの新しいアイデアに繋がりますように。

デモはこちら

記事のコメント

タイトルとURLをコピーしました