フォームの残り文字数を表示する方法をJavaScriptで実装
フォームの残り文字数を表示する方法をJavaScriptで実装
よく見る残り文字数は〇〇ですっていうやつをJSで実装する方法
実装方法
index.html . . <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ほげー</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <button id="button">お問い合わせ</button> <form action="" id="form"> <p><textarea id="textarea" name="textarea" cols=50 rows=10 maxlength="500"></textarea></p> <p><input id="submit" type="submit" value="送信"></p> </form> // ここでJSを読んでいる <script src="js/app.js"></script> </body> </html>
js/app.js . . . // フォームの要素を取得 var button = document.getElementById("button"); var form = document.getElementById("form"); var textarea = document.getElementById("textarea"); // 文字数制限 // getAttributeメソッドで属性を取得可能 var maxTextNum = textarea.getAttribute("maxlength"); /* 要素の追加 ***************/ // 残り文字数を表示する要素の追加 var textMessage = document.createElement('div'); var parent = textarea.parentElement; parent.insertBefore(textMessage, textarea); // テキストエリアで要素をタイプした時。 // 残り文字数を表示する要素の追加 // keyupファンクションなのでキーを離した時にこの関数が呼ばれます textarea.addEventListener('keyup', function() { var currentTextNum = textarea.value.length; // (maxTextNum - currentTextNum) で残り文字数を求めている textMessage.innerHTML = '<p>あと「' + (maxTextNum - currentTextNum) + '」文字入力できます。</p>'; });
参考
いちばんやさしいJavaScriptの教本 人気講師が教えるWebプログラミング入門