textarea に入力された文字数を、リアルタイムに数える [JavaScript]
textarea に入力された文字数を、リアルタイムに数える javascript のサンプルです。
<!DOCTYPE html><html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リアルタイムで文字数を数える</title>
<script type="text/javascript"><!--
function CountStr( id, str ) {
document.getElementById(id).innerHTML = "文字数:" + str.length + "文字";
}// --></script>
</head>
<body>
<textarea name="text1" rows="10" cols="30" onkeyup="CountStr('input1', value);">
</textarea>
<p id="input1">文字数:0文字</p>
</body></html>
説明するほどのことでもないのですが、一応書いておきます。
javascript で、CountStr( id, str ) という関数を作り、textarea の onkeyup で呼び出します。
CountStr( id, str ) では、str.length で文字数が得られるので、表示文字列を作って、
id="input1"
の文字列を書き換えます。pタグの 「文字数:0文字」 は、初期値です。
textarea が複数あっても、id を変えれば対応できるようにしてあります。
この javascript では、改行コードも1文字として数えてしまいます。もし、改行コードを数えたくないのであれば、文字数から行数を引いてやる必要があります。
今回は、リアルタイムに入力文字数を数えたかったので、 javascript を使いましたが、リアルタイムでなくてもいいのであれば、php などを使ってサーバー側で数えた方がいいかもしれません。
タグ:文字数 JavaScript
コメント 0