Becky Becky - 4 months ago 7
CSS Question

Showing a new div when an input is filled in without clicking out of the input

Is there a way to check to see if an input is filled in as you are typing in it? Right now my code checks to see if the input is filled in and then displays a div after the user clicks out of the input. I am wanting the div to display once the future validation methods have been met...without having to click outside of the input.

Also is there a way to keep the div to display if the user would have to go back and delete the data in an input?



$(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

The onchange event is only fired if you leave (blur) the input element. To track updates independent of the input focus state, you have to use another event type, for example onkeydown or 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();
        }
    });
});