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

【问题标题】：Cannot detect leading and trailing spaces oninput无法检测输入的前导和尾随空格
【发布时间】：2021-02-19 17:24:16
【问题描述】：

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

有人知道解决方法吗？

【问题讨论】：

我用输入事件更新了代码笔......但同样的事情。
@LouysPatriceBessette 是的，我刚刚自己玩过你的 codepen，发现它仍然有效。问题一定在我这边。我也刚刚意识到，由于某种原因，Visual Studio 中的这个函数有一个绿松石色的名称，而不是像我所有其他函数一样的黄色名称。 here is a screenshot. 我敢打赌这是造成它的原因。知道为什么会这样吗？
@oldboy 这是我的代码CodePen
同一个函数名用于某处的类...见problem reproduced
哈好吧。请参阅 MDN input type email 并在第 3 点查找“价值”段落。

标签： javascript string google-chrome user-input sanitization

【解决方案1】：

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

在提交表单之前，会自动验证输入值以确保其为空或格式正确的电子邮件地址（或地址列表）。

来自MDN

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

空字符串
一个格式正确的电子邮件地址
以逗号分隔的电子邮件地址列表。

: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 的电子邮件地址...

【讨论】：

我想要一种简单的方法（即不依赖 keydown 和无穷无尽的键值）来防止用户输入不可接受的键。你知道有什么方法可以清除type=email 元素中的空格吗？
前导和尾随空格不会从输入框中删除...但它们会从value 属性中删除。这就是为什么您无法检测到它们的原因。 ---我总是使用文本类型来完成它。来自浏览器的这种“尝试”进行自动验证是不可靠的。使用它们的唯一充分理由是关于可访问性问题......符合屏幕阅读器的东西。但是您也可以通过label 达到这种一致性。
我通过使用keydown 和drop 来避免电子邮件字段出现空格。无论如何，但type=email 很方便，因此您不必自己验证电子邮件地址，并且还允许CSS 访问:valid 和:invalid 伪选择器。在 MDN 的 type=email 页面上提供的 /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61} [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ 实际上是完全等效的吗？