技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

フォームの残り文字数を表示する方法をJavaScriptで実装

フォームの残り文字数を表示する方法をJavaScriptで実装

よく見る残り文字数は〇〇ですっていうやつをJSで実装する方法

f:id:lhiroki1205:20190211155824p:plain

実装方法

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プログラミング入門