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 CountLine( id, str ) {
num = str.match(/\r\n|\n/g);
if(num!=null){
line = num.length +1;
}else{
line = 1;
}
document.getElementById(id).innerHTML = "行数：" + line + "行";
}// --></script>
</head>
<body>
<textarea name="text1" rows="10" cols="30" onkeyup="CountLine('input1', value);">
</textarea>
<p id="input1">行数：1行</p>
</body></html>javascript で、CountLine( id, str ) という関数を作り、textarea の onkeyup で呼び出します。
CountLine( id, str ) では、str.match() で改行コードかどうかチェックしています。改行コードがあった場合は、0からカウントされるので、1を足します。
改行コードがなかった場合は、初期値の1を入れます。
表示文字列を作って、
id="input1" の文字列を書き換えます。pタグの 「行数：1行」 は、初期値です。textarea は、画面に表示した段階で１行目が表示されているので、0行ではなく、1行としました。
textarea が複数あっても、id を変えれば対応できるようにしてあります。
今回は、リアルタイムに
行数を数えたかったので、 javascript を使いました。リアルタイムで行数を数えたいということはあまりないと思うので、php などを使ってサーバー側で数えた方がいいかもしれません。タグ：JavaScript 行数
コメント 0