javascript - 如何在用空格填充后在 JavaScript 中清空(重置)输入类型的电子邮件(in.value =""不起作用)

Question

当用仅空格填充一个输入(type="email")并想要清除它时(value === "") 对于 JavaScript 它不起作用。考虑以下代码 ( link ):

<input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">
<button onclick="document.getElementById('myEmail').value = '';">Try it</button>

但是具有输入类型 text 或 password 的相同代码有效!我正在 Chrome 中进行测试。

编辑:是的，使用 setAttribute 有效。但是如果你不想改变输入属性，有什么解决办法吗？

Answer 1

与其直接设置 value 属性，不如通过执行以下操作直接设置电子邮件输入的“value”属性:

document.getElementById("btn").addEventListener("click", function() {

  // Remove this:
  // document.getElementById("myEmail").value = "";

  // Replace with this:
  document.getElementById("myEmail").setAttribute("value", "");
})

E-mail: <input type="email" id="myEmail" placeholder="Enter e-mail" autocomplete="off">

<button id="btn">Try it</button>

<p>Click button to empty the email field. Notice that the placehold is visible after clicking, even when email field contains whitespaces.</p>

此方法强制浏览器重新呈现输入字段，以便呈现的值与设置的属性相匹配(即 "")。

为什么你原来的方法不起作用；我的理解是，在内部，电子邮件输入类型的 value DOM 属性被“trim ”，这意味着读取或设置用空格填充的值与没有空格的相同值没有区别。因此，将值从 "" 更新为 "" 将被视为“相同值”的更新，将被忽略。