1

I am trying to edit HTML form text box using Javascript.

I want the HTML text box to initially display "Enter your name here", and as soon as the user clicks on the box, I want the text box to go blank, so that the user does not have to delete the "Enter your name here" text before actually entering her name.

How do I go on about doing that?

This is what I have tried, without any success.

<body>

    <script type="text/javascript">
        function name()

            {
                window.document.getElementById("name").value='';
            }

    </script>

    Your Name:<input type="text" value="Enter Your Name Here" id="name" onclick="name();">
</body>
Improve this question
1
  • 2
    Why don't you just use placeholder in your input? Commented Jul 1, 2014 at 8:04

5 Answers 5

Reset to default
2

That is called a placeholder, and in HTML5 you have a attribute on input for that:

<input type="text" placeholder="Enter Your Name Here" />

See how it works in jsfiddle.

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

4 Comments

Hi Patrick, Well, the answer does what I wanted to do. I didn't know about Placeholder. Thanks. It's just that I was waiting to see if anyone could also do it with JS too.
You can, but you don't want to.
See this one for example: scriptiny.com/2012/08/html5-placeholder-fallback-using-jquery, or this one: webdesignerwall.com/tutorials/….
Thank. The second one had what I wanted to see. Just for curiosity, of course placeholders are better option.
1

I'd advise you to use the 'placeholder' attribute of the textbox:

<input type="text" placeholder="Enter Your Name Here" id="name">

This will give you the desired effect (i.e. disappearing text on user click).

Improve this answer

Comments

0

use 

     window.document.getElementById("name").innerHTML = #value
Improve this answer

Comments

0

You can use the placeholder attribute of input tag.

Sample: <input type="text" name="fname" placeholder="First name">

Improve this answer

Comments

0 

<script type="text/javascript">
    function name()

        {
            window.document.getElementById("name").value='';
        }

</script>

Your Name:<input type="text" value="Enter Your Name Here" id="name" onclick="javascript: name();"> </body>
Improve this answer

Comments

Your Answer

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