・文字数をカウントするHTML

<!doctype html>
<html lang="ja">
<head>
	<meta charset="Shift_JIS">
	<title>テキストの文字数をカウントする</title>
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>
	<form action="#" method="post" id="theForm">
		<fieldset>
			<p>コメントを入力して下さい</p>
			<div><label for="comments">コメント</label><textarea name="comments" id="comments" maxlength="100" required></textarea></div>
			<div><label for="count">文字数</label><input type="text" name="count" id="count" disabled></div>
			<div><input type="submit" value="送信" id="submit"></div>
		</fieldset>
	</form>
	<script src="js/utilities.js"></script>
	<script src="js/text.js"></script>
</body>
</html>

・JavaScript

function limitText() {
	use strict;
	var comments = U.$(comments);
	var count = comments.value.length;
	
	U.$(count).value = count;
	
	if (count > 140) {
		comments.value = comments.value.slice(0,140);
	}
}

window.onload = function() {
	use strict;
	U.addEvent(U.$(comments), keyup, limitText);
	U.addEvent(U.$(comments), change,limitText);
};

<参考>

入門 モダンJavaScript

入門 モダンJavaScript

  • 作者: Larry Ullman,永井勝則
  • 出版社/メーカー: オライリージャパン
  • 発売日: 2013/02/23
  • メディア: 大型本
  • 購入: 1人 クリック: 26回
  • この商品を含むブログ (18件) を見る

                                • -

今回で感謝のプログラミングは【176.5時間目】
10000時間まで、あと【9823.5時間】

PHPの本を読んだ時間、JavaScriptを書かずに読んだ時間も入れた。
前回から3時間分加算。