テキストボックス内でエンターキーを押した際にも入力チェックを行いたい

前提・実現したいこと

テキストボックスに入力中の文字数をカウントし、制限文字数をオーバーしていた場合にalertを表示する入力フォームを作成しています。

エラーチェックのタイミング

A.テキストボックスからfocusが外れた時
B.submitボタンを押した時
C.テキストボックス内でエンターキーを押した時

発生している問題・エラーメッセージ

タイミングCの場合はclickとblurが両方発生するため、alertが無限に表示されます。
そのためclickイベント発生時にblurイベントを削除したところ、タイミングAでalertが出なくなってしまいます。
削除したblurイベントを復活させるにはどうしたら良いでしょうか。

該当のソースコード

html
1<form action="#">
2  <div class="hoge">
3    <p class="name">テキストボックス１</p>
4    <input type="text" class="txb">
5    <p class="fuga">入力文字数：<span class="num">0</span> （<span class="limit">3</span>文字まで）</p>
6  </div>
7  <hr>
8  <div class="hoge">
9    <p class="name">テキストボックス２</p>
10    <input type="text" class="txb">
11    <p class="fuga">入力文字数：<span class="num">0</span> （<span class="limit">5</span>文字まで）</p>
12  </div>
13  <button type="submit" class="btn">送信</button>
14</form>

javascript
1function limitCheck(elm) {
2  'use strict';
3  var msg = '';
4  var flg = 0;
5  var checkTgt = '.txb';
6
7  if (event.type === 'blur') {
8    if (elm.hasClass('error')) {
9      var limit = parseInt(elm.siblings('.fuga').children('.limit').text(), 10);
10      msg = limit + '文字以内で入力してください。\n' + 'イベントの種類：' + event.type;
11      alert(msg);
12    }
13  } else {
14    $('.error').each(function () {
15      var p = $(this).parents('.hoge');
16      var limit = parseInt(p.find('.limit').text(), 10);
17      msg += $(this).closest('.hoge').find('.name').text() + 'は' + limit + '文字以内で入力してください。\n' + 'イベントの種類：' + event.type + '\n';
18      flg++;
19    });
20    if (flg !== 0) {
21      $(checkTgt).off('blur');
22      event.preventDefault();
23      alert(msg);
24      $(checkTgt).blur();
25    }
26  }
27}
28// 入力文字数表示
29function cntChar(elm) {
30  'use strict';
31  var p = elm.parents('.hoge');
32  var cnt = elm.val().length;
33  var limit = parseInt(p.find('.limit').text(), 10);
34  p.find('.num').text(cnt);
35  if (cnt > limit) {
36    elm.addClass('error');
37  } else {
38    elm.removeClass('error');
39  }
40}
41$(function() {
42    'use strict';
43    //文字数カウント
44    $('.txb').bind('keyup touchend', function() {
45        cntChar($(this));
46    });
47    // 制限文字数チェック実行
48    $('.txb').on('blur', function() {
49        limitCheck($(this));
50    });
51    $('.btn').on('click', function() {
52        limitCheck();
53    });
54});
55

試したこと

alert表示後に$(document).on('blur','txb)を追加したところ無限alertになってしまいました

補足情報

jQueryのバージョン：1.9.0
エンターキーを無効には出来ません

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

回答1件

ベストアンサー

blurを一度しか実行したくない場合、Focusで設定し、blur内で削除するという手が使えます。

// とりあえずの対応
    if (flg !== 0) {
        if (event.type === 'blur') {
            alert(msg);
        } else {
            //$(checkTgt).off('blur'); 削除
            event.preventDefault();
            //alert(msg); 削除
            $(checkTgt).blur();
        }
    }

...

    $('.txb').on('focus', function() { // Focusがあった時に
        $(this).on('blur', function() { // Blurイベントハンドラを追加
            $(this).off('blur'); // 一度でoffする
            limitCheck();
        });
    });

上記をそのままだと無駄な処理が多いので、「各TextBoxの判定処理だけを抜き出し、submitのclickではチェックとblur発火だけを行う」等の修正を行わないとダサいです。

// とりあえずの対応その2

var hasBlurHandler = false;// グローバルに定義

...

    if (flg !== 0) {
        if (event.type === 'blur') {
            alert(msg);
        } else {
            //$(checkTgt).off('blur'); 削除
            event.preventDefault();
            if(hasBlurHandler) {　// ここ追加
              $(checkTgt).blur();
            } else {
              alert(msg);
            }
        }
    }

...

    $('.txb').on('focus', function() { // Focusがあった時に
        $(this).on('blur', function() { // Blurイベントハンドラを追加
            $(this).off('blur'); // 一度でoffする
            hasBlurHandler = false; // 追加
            limitCheck();
        });
        hasBlurHandler = true; // 追加
    });

投稿2019/03/19 05:49

編集2019/03/19 08:54