无法检测输入的前导和尾随空格

Question

在 Chrome 86 中，无论出于何种原因，JS 似乎无法检测从 input 事件中的 input[type=email] 元素派生的用户输入中的前导和尾随空格。我已经测试了多种检测此类空间的方法（例如 Str.includes(' ')、/\s/.test(str) 等），其中 none 有效。

有人知道解决方法吗？

Answer 1

类型email的输入与类型text的输入不同。有一些输入自动验证以确保值的格式正确。

The input value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted.

来自MDN

我认为这就是为什么空格从您正在测试的值中“删除”的原因。有 3 种可能的值格式：

空字符串
一个格式正确的电子邮件地址
coma-separated 个电子邮件地址列表。

pseudo-classes :valid 和 :invalid 自动应用于输入，您可以将它们用于样式和逻辑。

document.querySelectorAll("input[type='email']:valid").forEach(field=>{
  console.log(field.value + " is valid" )
})

document.querySelectorAll("input[type='email']:invalid").forEach(field=>{
  console.log(field.value + " is invalid" )
})

input:valid{
  background: green
}

input:invalid{
  background: red
}

<input type="email" value="abcdef"/><br>
<input type="email" value="someone@somesite.com"/><br>
<input type="email" value=""/><br>
<input type="email" value="someone@somesite"/>

请注意，空白字段被视为有效以及没有 TLD 的电子邮件地址...

无法检测输入的前导和尾随空格

Cannot detect leading and trailing spaces oninput

javascript

string

sanitization

user-input

google-chrome