テキストエリアで指定の文字数以下の入力をした場合、モーダルを表示させたい。

Javascript初心者です。

当初は、こちらを元に
30文字以下の場合はメッセージを表示できるようにしていましたが、
メッセージではなくモーダルウィンドウを表示させたいと思っています。

前提・実現したいこと

<script type="text/javascript"><!--
function InputCharCheck( minnum, target, report ) {
   var diff = minnum - document.getElementById(target).value.length;
   var reps, repc;
   if( diff > 0 ) {
      // 足りない場合
      reps = "";
      repc = "";
   }
   else {
      // 足りた場合
      reps = "";
      repc  = "";
   }
   document.getElementById(report).innerHTML = reps;
   document.getElementById(report).style.color = repc;
}
// --></script>

<form action="hoge" method="get">
<textarea name="message" value="" minlength="30" id="sample1" onkeyup="InputCharCheck(30,'sample1','modal');"></textarea>

<!-- ここがモーダルウィンドウで表示させたい部分です。 -->
<div id="modal">
30文字以下の場合は送信できません。
</div>

<input type="submit" value="送信">
</form>

Javascript内の

   if( diff > 0 ) {
      // 足りない場合
      reps = "";
      repc = "";
   }

ここの部分にモーダルウィンドウを表示させる記述を行えば良いのだろうとは思っていますが
Javascriptなど勉強し始めな為、どういう構築をすれば良いのか分かりません。

ぜひ、お知恵を貸して頂ければありがたいです。
モーダルウィンドウは、tingleを使用しようと思っていましたが、
別で良い方法があれば、教えてください。

よろしくお願いします。

行動規範の内容に同意します

回答3件

ベストアンサー

そのまま tingle.js を使ってモーダルを1文字ごとに出すとすると

JavaScript
1var modal = new tingle.modal();
2modal.setContent(document.getElementById('modal'));
3var target = document.getElementById('sample1');
4target.addEventListener('input', function(event) {
5  if (!target.checkValidity()) {
6    modal.open();
7  }
8}, false);

ですが、さすがに邪魔なのでせいぜいこのくらいかと

JavaScript
1var target = document.getElementById('sample1');
2target.addEventListener('change', function(event) {
3  if (!target.checkValidity()) {
4    target.reportValidity();
5  }
6}, false);

あえて、よりうざい実装を求めているなら前者にすればいいかと思います。

minlength とメッセージが合っていないので注意
https://developer.mozilla.org/ja/docs/Web/HTML/Element/textarea#attr-minlength

投稿2020/02/03 07:10

x_x

総合スコア13749

EFO（エントリーフォーム最適化）の観点で考えた場合
あまり役に立たないかもしれません。

最初はtextareaの中身には何も入っていませんよね？
1文字入力した瞬間、textareaを塞ぐようにデカデカとモーダルボックスが現れるわけです。
「30文字以下の場合は送信できません。」

お、おう……じゃあ入力続けるわ、モーダルボックスを閉じて……
2文字目を入力した瞬間、またモーダルボックス
「30文字以下の場合は送信できません。」

「何回閉じても無駄ですよ～」と煽られているかのようです。
兵庫県警に補導されちゃいますね。

モーダルボックスというのはあわせ技です。

HTML、CSS、JSの本来の世界で用意されているものではありません。
画面自体はHTMLとCSSだけで実現させなければなりません。
JSは後からHTMLのDOMを書き換える事しかできないのです。

.modal自体はdisplay: none;を指定して隠れている。
しかし.modal.activeである状態ならば
特定の要素を画面中央にdisplay: block; position: fixed;等を利用してデカデカと表示する！

これを利用してJavaScriptで.modelのタグに対して、
.activeクラスを付与したり取り除いたりを行う事で実現出来ます。

【jQuery・CSS】意外と簡単！モーダルウィンドウをプラグインなしで作る - INSPIRATION
こういったモーダルボックスの作り方を紹介したり、
プラグインやライブラリ化して配布してくださる方が居ますが、
それはそのノウハウの結集なだけで自分で作るなり、どこからか持ってくるなりして用意しなければなりません。

まずは上記のサイトを確認しながらモーダルボックスを作ってみてください。
フォーム機能に組み込むのはその次の段階です。

投稿2020/01/28 07:30

編集2020/01/28 07:32