Question

我在type=email输入元素上添加了一个on'change'事件监听器。当我在电子邮件字段中添加几个空格字符，然后失去对该元素的关注时，更改事件似乎没有被触发。

但是，这个确切的场景适用于type=text输入元素。

发生了什么事？

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

浏览器：Chrome版本63.0.3239.132（官方版本）（64位）

Answer 1

我最初说过，看起来在电子邮件字段上执行了自动trim操作，因为在键入一些空格并离开字段后，值的长度将返回到0，但是在返回到字段时，空间保留在元素中，因此它们不会被修剪掉。

我怀疑，因为空格对于此输入类型无效，所以它们不被视为值的一部分，因此当您输入值并且change事件没有＆＃39时，值不会改变;开火。

在字段中键入一些空格，然后点击TAB离开该字段，然后返回该字段。空间仍然存在。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用类似的内容：

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

但是，如上所述，input[type="email"]不算空格。它只能用作快速破解；

Answer 3

input[type="email"] 不会触发更改事件，而是使用模糊事件：

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

当输入的值是空格时，输入类型=电子邮件的更改事件不会触发

3 个答案: