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">