无法在 Chrome 中将 <input type="email"> 重置为空白（在 Firefox 和 IE 中工作正常）

Question

我的网站中有一个包含 input type="email" 的字段。在某些验证中，我将字段重置为空，请按如下方式检查我的代码：

    function clickme(){
        document.getElementById("abc").value="";
    }

    <input type="email" id="abc" placeholder="abc">
    <input type="button" onclick="clickme()" value="go">

如果我插入白色 space 并单击按钮，则它工作正常，并且在 Firefox 和 IE 中重置为空白。在 Chrome 的情况下，它无法重置。 (注：type不能改成input type="text")

Chrome版本：版本43.0.2357.130m

Answer 1

如果将其包装在 <form> 元素中，您可以利用重置输入类型。

<form>
  <input type="email" id="abc">
  <input type="reset" value="go">
</form>

Answer 2

这很棘手，但你可以做到：

function clickme(){
    document.getElementById("abc").value="a";
    document.getElementById("abc").value="";
}

它适用于白色 space 和其他字符以及 chrome 40。

Answer 3

我能够通过使用 jQuery 事件监听器而不是内联的 onclick 属性来解决这个问题。参见fiddle，如下。

合理的解释（基于我的测试，而不是文档）：Chrome 的当前版本要求在使用 onclick 调用它们之前定义 JS 函数。奇怪的是，当我第一次加载它时，你的 original fiddle 向我抛出一个未定义的函数错误。在我写这个答案的时间跨度里，我再次测试，它运行正常。

HTML:

<input type="email" id="abc">
<input id="specialButton" type="button" value="go">

和 JS:

function clickme(){
    document.getElementById("abc").value="";
}

$(document).on("click tap", "#specialButton",function() {
    clickme();
});

Unable to reset <input type="email"> to blank in Chrome (Working fine in Firefox and IE)