Input type=email's change event is not firing when the value entered is whitespace

Question

I've added an on 'change' event listener to a type=email input element. When I add a couple space characters into the email field, then lose focus on that element, the change event doesn't seem to be firing.

However, this exact scenario works just fine with type=text input elements.

What's going on?

$('input[type="email"]').change(e => {
    console.log('Triggered!');
});

Browser: Chrome Version 63.0.3239.132 (Official Build) (64-bit)

Answer 1

I originally said that it looks like there is an automatic trim operation performed on email fields because the length of the value is coming back at 0 after typing some spaces and leaving the field, but upon returning to the field, the spaces remain in the element, so they aren't getting trimmed out.

I suspect that, because spaces are not valid for this input type, they are not considered part of the value, thus the value doesn't change when you enter them and the change event doesn't fire.

Type some spaces in the field and then hit TAB to leave the field, but then return to the field. The spaces will still be there.

 $('input[type="email"]').on("blur", function(e){ console.log(this.value.length); }); $('input[type="email"]').on("change", function(e){ console.log("Change fired!"); });

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

Answer 2

You can use something like that:

$('input[type="email"]').on('focusout', {
    console.log('Triggered!');
    var $trig = $(this);
    $trig.attr('trimmed', $trig.val().toString().trim());
    $trig.val( '').val($trig.attr('trimmed'));
});

But, as answered above, input[type="email"] does not count whitespaces. It is only works as fast hack;

Answer 3

input[type="email"] does not fire change event, use blur event instead:

 $('input[type="email"]').blur(function(){ console.log('blur event is fired.'); });

Answer 4

I am facing the same problem with React, and I don't want to reflect the error on the onBlur event (as other solutions here). I don't think an error should be reflected in any input by the simple fact of removing the mouse from that input. For me that's not User friendly,... AT ALL.

Why?

1. Because the User might have decided to remove the mouse from that Input only because he/she simply wants to copy something from somewhere else first,... and then past it there (and/or to past it somewhere else). So technically there is no mistake there yet.
2. Because I simply want to fill another input field of the form first. Why? Becase that's precisely the field's value I already copied from somewhere else, so that's the value I have stored in clipboard, and it doesn't goes where my mouse landed by default. Or simply because I just want to! I'm the User, so I can choose the order to fill the form!

For me is more than enough with validating what the User has written and/or removed/deleted from the Inputs (onChange validation) AND also what the User finally decides to send (onSubmit validation). A proper combination of onChange and onSubmit validation is the perfect healthy balance between thoroughness and User friendly.

A Solomonic "solution":

I am using a custom validation hook. As I can not change the behavior of the input with a type email regarding the white spaces in an OnChange event,... then I decided to use a workaround, which is simply avoiding the typing of white spaces and that's it, as the onChange event won't trigger anyway.

const preventWhiteSpaceOnKeyDown = (e) => {
    if (e.key === " ") {
        e.preventDefault();
    }
}

. . .

                <input
                    type={"email"}
                    id='commentEmail'
                    name='commentEmail'
                    required={true}
                    autoFocus={true}
                    ref={emailInputRef}
                    value={emailState}
                    onChange={emailInputChangeHandler}
                    onKeyDown={preventWhiteSpaceOnKeyDown}
                />

This is not a " solution ". There is no clean solution for this. But after this at least my input[type=email] element won't hold useless white spaces.