How to determine that the input is not empty without forcing user to change the input-CodePudding

So if someone needs to disable a submit button unless the user input is filled, he needs to do this:

        $(function () {
            $('#login').attr('disabled', true);
            $('#userinput').change(function () {
                if ($('#userinput').val() != '') {
                    $('#login').attr('disabled', false);
                } else {
                    $('#login').attr('disabled', true);
                }
            });
        });

And this is the html:

<input type="text" name="userinput"  id="userinput">

<button id="login"  disabled="disabled">Submit</button>

And this will work fine but the only problem exists, is that, the user MUST leave the input field in order to run the change event of Javascript.

However I need to run this when user is still active on the input.

So how to do that in Javascript?

CodePudding user response：

use the onfocus eventlistener

$('#userinput').focus(func);

CodePudding user response：

To track changes before the user leaves the input use the keyup event instead of the change even.

$('#userinput').on('keyup', function () {
    if ($('#userinput').val() != '') {
        $('#login').attr('disabled', false);
    } else {
        $('#login').attr('disabled', true);
    }
});