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

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并且不会触发change事件。

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

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

你可以使用这样的东西：

$('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"]不计算空格。 它只能作为快速 hack 使用；

Answer 3

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

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

Answer 4

我在 React 中遇到了同样的问题，我不想在 onBlur 事件上反映错误（就像这里的其他解决方案一样）。 我不认为错误应该通过从该输入中移除鼠标的简单事实反映在任何输入中。 对我来说，这不是用户友好的，......根本。

为什么？

1. 因为用户可能已经决定从该输入中移除鼠标，只是因为他/她只是想先从其他地方复制一些东西，然后……然后将其粘贴到那里（和/或将其粘贴到其他地方）。 所以从技术上讲，那里还没有错误。
2. 因为我只想先填写表单的另一个输入字段。 为什么？ 因为这正是我已经从其他地方复制的字段值，所以这就是我存储在剪贴板中的值，并且默认情况下它不会去我的鼠标着陆的地方。 或者仅仅是因为我只想！ 我是用户，所以我可以选择填写表格的顺序！

对我来说，验证用户从输入中写入和/或删除/删除的内容（onChange 验证）以及用户最终决定发送的内容（onSubmit 验证）就足够了。 onChange 和 onSubmit 验证的适当组合是彻底性和用户友好之间的完美平衡。

所罗门“解决方案”：

我正在使用自定义验证挂钩。 由于我无法使用有关 OnChange 事件中的空格的类型电子邮件更改输入的行为，...然后我决定使用一种解决方法，这只是避免输入空格，仅此而已，作为 onChange无论如何都不会触发事件。

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}
                />

这不是“解决方案”。 对此没有干净的解决方案。 但在此之后，至少我的 input[type=email] 元素不会包含无用的空格。