HTML how to clear input using javascript?

Question

I have this INPUT, it will clear everytime we click inside of it.

The problem: I want to clear only if value = exemplo@exemplo.com

<script type="text/javascript">
    function clearThis(target) {
        target.value= "";
    }
</script>
<input type="text" name="email" value="exemplo@exemplo.com" size="30" onfocus="clearThis(this)">

Can someone help me to do this? I don't know how to compare, I already tried but no success.

You're looking for the `placeholder` attribute. – SLaks Jun 21 '13 at 14:31 — SLaks, Jun 21 '13 at 14:31
IE8 does not inherently support `placeholder` attribute – Vikram Sep 05 '14 at 03:02 — Vikram, Sep 05 '14 at 03:02

score 53 · Accepted Answer · edited Apr 18 '21 at 13:53

53

<script type="text/javascript">
    function clearThis(target) {
        if (target.value == 'exemplo@exemplo.com') {
            target.value = "";
        }
    }
</script>

Is this really what your looking for?

edited Apr 18 '21 at 13:53

Bugaloo

1,671
3
16
21

answered Jun 21 '13 at 14:31

David Scott

944
8
11

score 17 · Answer 2 · edited Oct 05 '21 at 10:23

17

For me this is the best way:

<form id="myForm">
  First name: <input type="text" name="fname" value="Demo"><br>
  Last name: <input type="text" name="lname"><br><br>
  <input type="button" onclick="myFunction()" value="Reset form">
</form>
     
<script>
function myFunction() {
    document.getElementById("myForm").reset();
}
</script>

edited Oct 05 '21 at 10:23

Carson

6,105
2
37
45

answered May 25 '20 at 02:35

Juan Prendas

171
1
2

2

Welcome to SO! Please, consider adding an explanation of why you think this would be a solution to OP's question as it is concerned with resetting the input value under a specific condition. This is especially important since other answers already cover the question. Do take a look at answering [guidelines](https://stackoverflow.com/help/how-to-answer) – Oleg Valter is with Ukraine May 25 '20 at 03:34

Bugaloo · Answer 3 · 2013-06-21T14:58:03.503

3

you can use attribute placeholder

<input type="text" name="email" placeholder="exemplo@exemplo.com" size="30" />

or try this for older browsers

<input type="text" name="email" value="exemplo@exemplo.com" size="30" onblur="if(this.value==''){this.value='exemplo@exemplo.com';}" onfocus="if(this.value=='exemplo@exemplo.com'){this.value='';}">

edited Jun 21 '13 at 14:58

answered Jun 21 '13 at 14:44

Bugaloo

1,671
3
16
21

1

And what about IE 9 and older? – Ian Jun 21 '13 at 14:48
Placeholder is cleared when you start typing, not when you click into the input. – Hashim Aziz Jun 13 '23 at 00:14

score 3 · Answer 4 · answered Mar 10 '16 at 18:25

You could use a placeholder because it does it for you, but for old browsers that don't support placeholder, try this:

<script>
function clearThis(target) {
    if (target.value == "exemplo@exemplo.com") {
        target.value = "";
    }
}
function replace(target) {
    if (target.value == "" || target.value == null) {
        target.value == "exemplo@exemplo.com";
    }
}
</script>
<input type="text" name="email" value="exemplo@exemplo.com" size="x" onfocus="clearThis(this)" onblur="replace(this)" />

CODE EXPLAINED: When the text box has focus, clear the value. When text box is not focused AND when the box is blank, replace the value.

I hope that works, I have been having the same issue, but then I tried this and it worked for me.

score 0 · Answer 5 · answered Jun 21 '13 at 14:31

0

Try this :

<script type="text/javascript">
function clearThis(target){
    if(target.value == "exemplo@exemplo.com")
    {
        target.value= "";
    }
}
</script>

answered Jun 21 '13 at 14:31

Raitom

33
1
5

score 0 · Answer 6 · answered Jun 21 '13 at 14:33

<script type="text/javascript">
    function clearThis(target){
        if (target.value === "exemplo@exemplo.com") {
            target.value= "";
        }
    }
    </script>
<input type="text" name="email" value="exemplo@exemplo.com" size="30" onfocus="clearThis(this)">

Try it out here: http://jsfiddle.net/2K3Vp/

score 0 · Answer 7 · answered Mar 14 '14 at 23:51

0

You don't need to bother with that. Just write

<input type="text" name="email" placeholder="exemplo@exemplo.com" size="30">

replace the value with placeholder

answered Mar 14 '14 at 23:51

Duck

9
1

Placeholder is cleared when you start typing, not when you click into the input. – Hashim Aziz Jun 13 '23 at 00:14

score 0 · Answer 8 · answered Nov 09 '17 at 05:23

0

instead of clearing the name text use placeholder attribute it is good practice

<input type="text" placeholder="name"  name="name">

answered Nov 09 '17 at 05:23

saigopi.me

14,011
2
83
54

score 0 · Answer 9 · answered Jun 13 '23 at 00:18

I'm surprised out of all these answers no-one's mentioned the simplest modern way to do this:

<input type="text" placeholder="Your Name" onfocus="this.placeholder=''" onblur="this.placeholder='Your Name'"

The onblur is only necessary if you want to restore the original placeholder after the user clicks away from the input.

HTML how to clear input using javascript?

9 Answers9

Linked

Related