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")
Chrome Version: Version 43.0.2357.130 m
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. 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
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.
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();
});