入力をクリックしなくても入力が完了したときに新しいdivを表示

Question

入力が入力されたときに入力が埋め込まれているかどうかを確認する方法はありますか？今すぐ私のコードは、入力が入力されているかどうかを確認し、ユーザーが入力をクリックした後にdivを表示します。将来の検証方法が満たされたらdivを表示したいと思っています...入力の外側をクリックする必要はありません。

また、ユーザーが入力に戻ってデータを削除する必要がある場合は、表示するdivを保持する方法はありますか？

$(function() { 
 
    var _=$('input'); 
 
    
 
    _.change(function() { 
 
     
 
     if (_.filter(function(){return $(this).val().length }).length==_.length) 
 
     $('.next').show(); 
 
     else 
 
      $('.next').hide(); 
 
      
 
    }); 
 
});

.next { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="name" type="text" /> 
 
<input id="email" type="text" /> 
 

 

 
<a class="next">show div</a>

Answer 1

あなたは（ぼかし）入力要素を残す場合onchangeイベントは、解雇されました。入力フォーカス状態に依存しない更新を追跡するには、別のイベントタイプ、たとえばonkeydownまたはonkeypressを使用する必要があります。

$(function() { 
    var $input = $('input'); 

    $input.on('keypress', function() { 
     if ($input.filter(function(){return $(this).val().length }).length == $input.length) { 
      $('.next').show(); 
     } 
     else { 
      $('.next').hide(); 
     } 
    }); 
}); 

Answer 2

イベントリスナーとしてkeyupを使用すると、これを達成できるはずです。

var _ = $('input'); 

_.keyUp(function(){ 
if (your validation rules are satisfied){ 
//Shows next button if validation rules are satisfied 
$(this).siblings(".next").toggle(); 
} 
else{ 
//Hides next button if validation rules are satisfied 
$(this).siblings(".next").toggle(); 
} 
}); 

Answer 3

@feeelaが指摘したように、「変更」イベントはフォーカスが失われたときにのみ発生します。次のコードは単純であり、入力が空白になってもDIVを表示したままにするなど、要件を満たします。

代わりにこれを試してみてください：

$(function() { 
 
    var $inputs = $('input'); 
 
    var $next = $('.next'); 
 
    $inputs.on('keypress', function() { 
 
    if ($(this).val()) { // We still want to use "this" here, so we're only examining the input that fired the event; otherwise, it will only get the value of the first input in the set 
 
     $next.show(); 
 
    } 
 
    }); 
 
});

：

$(function() { 
 
    $('input').on('keypress', function() { 
 
    if ($(this).val()) { // Gets the firing input's value 
 
     $('.next').show(); 
 
    } 
 
    }); 
 
});

また、あなたは変数を設定することができますが、このコードはとてもシンプルですが、それのための本当の必要はありません

Answer 4

これはうまくいくはずです。私は、ボックスの1つが要件を満たしているという要件ではないと思う。

私の例では、入力でキーが押された場合、それらのすべてがチェックされます。要件を満たすとすぐに部が表示されます。

これは、keyupイベントとjqueryの各機能を使用します。あなたは入力を無作為に記入することができます。私はkeydownを最初に持っていましたが、基本的にあなたはあまりに早くチェックしていました。

// JavaScript source code 
 
$(function() { 
 
var _ = $('input'); 
 

 
_.keyup(function() { 
 
    var allOk = true; 
 
    _.each(function() { 
 
     if ($(this).val() == '') { 
 
      allOk = false; 
 
     } 
 
    }); 
 
    if (allOk) { 
 
     $('.next').show(); 
 
    } 
 
    else { 
 
     $('.next').hide(); 
 
    } 
 
}); 
 
});

.next { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input id="name" type="text" /> 
 
<input id="email" type="text" /> 
 

 

 
<a class="next">show div</a>