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

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

事件不会触发。

在字段中键入一些空格，然后按 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

我在 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] 元素不会包含无用的空格。

Answer 3

你可以使用类似的东西：

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

对于那些在使用 React 时发现此问题的人，您可能需要考虑到粘贴事件也会出现此问题。基于 @reinier-garcia 的上述响应，您需要向组件添加一个 onPaste 处理程序来拦截此内容：-

onKeyDown={handleEmailKeyDown}
onPaste={handleEmailPaste}

处理者：-

const handleEmailKeyDown = (e: KeyboardEvent<HTMLInputElement>): void => {
  if (e.key === ' ') e.preventDefault()
}

const handleEmailPaste = (e: ClipboardEvent<HTMLInputElement>): void => {
  if (e.clipboardData.getData('text').trim() === '') e.preventDefault()
}

注意，我使用

trim()

是粘贴多个空格的情况（基本上是一种边缘情况）。

Answer 5

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

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