文字数カウントHTML
新井由己さん作成の文字数を設定してから入力するフォームを、iPhoneでも使い易いように編集してみました。
動作確認用
Code:
<html lang="ja"><head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="keywords" content="HTML5">
<title>文字数を設定してから入力するフォーム</title>
</head><body><script type="text/javascript"><!--
function CountDownLength( idn, str, mnum ) {
document.getElementById(idn).innerHTML = "あと" + (mnum - str.length) + "文字";
}
// --></script>
<p>■文字数が決められていて、あとどのくらい書けばいいのかわかるような入力フォームを作ってみました。途中でも設定文字数を変更できます。その場合は入力を始めると目標数値が変更されます。
</p>
<script>
function CountDownLength( idn, str, mnum ) {
document.getElementById(idn).innerHTML = "あと" + (mnum - str.length) + "文字";
}
</script>
設定文字数（変更可能）<input id="strlimits" value="200" size="5"><br>
<form class="Inputform">
<textarea cols="40" rows="10" onkeyup="CountDownLength( 'cdlength1' , value , document.getElementById('strlimits').value );"></textarea>
<div id="cdlength1" style="color: #cc0000;">あと-文字</div>
<br>
</form>
</body></html>
