ホーム>source

フォームの送信ボタンはデフォルトで無効になっており、入力した電話番号が正しい場合(つまり、下のdivに「OK」と表示されている場合)に有効になります。

だから私はこれを書いた:

 $(document).on('change', 'input', function() {
    if ( document.getElementById('phone-number-validator').innerText === 'OK') {
      $('.btn-default').prop('disabled', false);
    }
  });

問題は、電話番号の入力に焦点が合っていない場合にのみボタンが有効になることです。したがって、問題は、ユーザーが電話番号の入力を埋めた後に「Enter」を押すか、入力がまだフォーカスされている間に送信ボタンをクリックすると、送信ボタンがまだ無効になっているためフォームを送信しないことです。

ボタンを有効にするには、ユーザーは入力の外側で少なくとも1回クリックする必要があります。

電話番号の入力にフォーカスが置かれている場合でも、ユーザーがフォームを送信できるようにコードを変更したいと思います。そうする方法はありますか?

あなたの答え
  • 解決した方法 # 1

    変更イベントはフォーカスアウト後にのみトリガーされますが、keyupまたはkeydownイベントハンドラーを使用して送信ボタンを検証および有効化できます

    $(document).on('keyup', 'input', function() {
        if ( $('#phone-number-validator').text() === 'OK') {
          $('.btn-default').removeProp('disabled');
        }
      });
    
    

  • 解決した方法 # 2

    jQuery keyup を使用できます  このためのイベント:

    $(document).on('keyup', 'input', function() {
        if ( document.getElementById('phone-number-validator').innerText === 'OK') {
          $('.btn-default').prop('disabled', false);
        }
      });
    
    

関連記事

  • 前へ java - JPAクエリ:サブクエリをグループ化条件に結合する
  • 次へ Rによるテーブルのソート