menu

Questions & Answers

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

I have a field with input type="email" in my website. In some validation I am resetting the filed to empty, please check my code as follows:

    function clickme(){
        document.getElementById("abc").value="";
    }
    <input type="email" id="abc" placeholder="abc">
    <input type="button" onclick="clickme()" value="go">

If I insert white space and click the button then it is working fine and it is resetting to blank in Firefox and IE. In the case of Chrome it is unable to reset. (Note: The type can not be changed to input type="text")

FIDDLE

Chrome Version: Version 43.0.2357.130 m

Comments:
2023-01-17 00:47:01
@Al.G. sorry buddy its a typo error. Updated!!Thank you
2023-01-17 00:47:01
Ok, comment removed.
2023-01-17 00:47:01
Feels like a Chrome bug. If the input=email is the only input in the form, or if you don't mind clearing the rest of the inputs in the form as well, you can call reset() on the form.
2023-01-17 00:47:01
@light but I have a complex type of form with lot of fields in it. So form reset can not be used.
2023-01-17 00:47:01
I tried with null also still same issue!!
2023-01-17 00:47:01
create a jsfiddle for this issue. Also, it works 4.0 for me on chrome Version 43.0.2357.130 (64-bit)
2023-01-17 00:47:01
Might have something to do with #shadow-root?
2023-01-17 00:47:01
I had tested it with fiddle, I will add link to the question!!
2023-01-17 00:47:01
Here is a fiddle - it's working: jsfiddle.net/khnat4tp Edit: your fiddle works for me fine, too (in chrome) Edit 2: yes, you're right, with whitespace it's not
2023-01-17 00:47:01
@Al.G. just add some white space and click button it is not working
Answers(3) :

If you wrap this in a <form> element you could leverage the reset input type.

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

https://jsfiddle.net/santhucool007/z0arsoq7

Comments:
2023-01-17 00:47:01
Thank you. But I can not put this inside the form! I have more fields in my site and its having lot of complex stuffs. So it cant be used.

It's tricky but you can do that :

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

It works for white space and other char as well on chrome 40.

http://jsfiddle.net/z0arsoq7/2/

I was able to fix this by using a jQuery event listener instead of an inlined onclick attribute. See fiddle, and as below.

Plausible explanation (based on my tests, not on documentation): the current version of Chrome requires that JS functions be defined before invoking them with onclick. Oddly, your original fiddle threw an undefined function error for me when I first loaded it. In the span of time I spent writing this answer, I tested again, and it worked properly.

HTML:

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

and JS:

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

$(document).on("click tap", "#specialButton",function() {
    clickme();
});
Comments:
2023-01-17 00:47:02
Interesting. The new fiddle works for me without trouble. Perhaps the problem arises from elsewhere on the page?
2023-01-17 00:47:02
I had added a place holder in my fiddle so you will identify!!