57

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.

2
  • 5
    You're looking for the placeholder attribute. Commented Jun 21, 2013 at 14:31
  • IE8 does not inherently support placeholder attribute Commented Sep 5, 2014 at 3:02

9 Answers 9

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

Is this really what your looking for?

Sign up to request clarification or add additional context in comments.

Comments

22

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>

2 Comments

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
Important to mention that reset() works only in <form>. That means if we have non-form input it is better to use .value = " "
4

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='';}">

1 Comment

And what about IE 9 and older?
4

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.

Comments

0

Try this :

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

Comments

0
<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/

Comments

0

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

Comments

0

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

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

Comments

0

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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.