CODEWITHSUNDEEP
javascripthtmlinputerase
Lucas Ferraz
Lucas Ferraz

Reputation: 740

HTML how to clear input using javascript?

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

The problem: I want to clear only if value = [email protected]

<script type="text/javascript">
    function clearThis(target) {
        target.value= "";
    }
</script>
<input type="text" name="email" value="[email protected]" 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.

Upvotes: 56

Views: 304039

Answers (9)

Hashim Aziz
Hashim Aziz

Reputation: 6165

I'm surprised out of all these answers, no one has mentioned the simplest, most 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.

Upvotes: 0

Juan Prendas
Juan Prendas

Reputation: 221

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>

Upvotes: 22

David Scott
David Scott

Reputation: 1084

<script type="text/javascript">
    function clearThis(target) {
        if (target.value == '[email protected]') {
            target.value = "";
        }
    }
</script>

Is this really what your looking for?

Upvotes: 66

saigopi.me
saigopi.me

Reputation: 14938

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

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

Upvotes: 0

SubLock69
SubLock69

Reputation: 101

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 == "[email protected]") {
        target.value = "";
    }
}
function replace(target) {
    if (target.value == "" || target.value == null) {
        target.value == "[email protected]";
    }
}
</script>
<input type="text" name="email" value="[email protected]" 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.

Upvotes: 4

Duck
Duck

Reputation: 9

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

<input type="text" name="email" placeholder="[email protected]" size="30">

replace the value with placeholder

Upvotes: 0

Bugaloo
Bugaloo

Reputation: 1691

you can use attribute placeholder

<input type="text" name="email" placeholder="[email protected]" size="30" />

or try this for older browsers

<input type="text" name="email" value="[email protected]" size="30" onblur="if(this.value==''){this.value='[email protected]';}" onfocus="if(this.value=='[email protected]'){this.value='';}">

Upvotes: 4

Adam
Adam

Reputation: 2225

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

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

Upvotes: 0

Raitom
Raitom

Reputation: 33

Try this : 

<script type="text/javascript">
function clearThis(target){
    if(target.value == "[email protected]")
    {
        target.value= "";
    }
}
</script>

Upvotes: 0

Related Questions