Javascript to replicate placeholder functionality in input text

Question

When a textbox is created, default, gray text (#888) is given a displayed. When it is given focus, the value should disappear and start showing the typed value. I've written the code for this problem and it is as follows:

<html>
    <script type="text/javascript">
        function Focus(i) {
            if (i.value == i.defaultValue) {
                i.value = "";
                i.style.color = "#000";
            }
        }

        function Blur(i) {
            if (i.value == "") {
                i.value = i.defaultValue;
                i.style.color = "#888";
            }
        }
    </script>

    <body>
        <input type="text" name="enter firstname" title="First Name" style="color:#888;"
        value="First Name" onfocus="Focus(this)" onblur="Blur(this)" />
        <input type="text" name="enterlastname" title="Last Name" style="color:#888;"
        value="lastname" onfocus="Focus(this)" onblur="Blur(this)" />
    </body>

</html>

But, here whenever the textbox is focused, the value is disappearing. What should I do in order to correct this? Even though the text box is under focus, the value should not disappear and the value should disappear only when I start typing in it. I'm a new user so I can't post screenshots.

Firstly script tags not inside body/head elements create invalid HTML and might even cause some exceptions in some browsers. — Soojoo
– Soojoo, Commented Oct 23, 2012 at 12:15
i.defaultValue is undefined but I'd go for the placeholder solution => pretty easy — VDP
– VDP, Commented Oct 23, 2012 at 12:19
hey, i din het u @sujathan . What is wrong in placing script tags inside body/head?? — sravan
– sravan, Commented Oct 23, 2012 at 12:56

yodog · Accepted Answer · 2012-10-23 12:15:45Z

5

what you want is called placeholder.

use it like this:

<input type="text" name="enterfirstname" placeholder="First Name" />
<input type="text" name="enterlastname" placeholder="Last Name" />

answered Oct 23, 2012 at 12:15

yodog

6,2834 gold badges28 silver badges52 bronze badges

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

3 Comments

VDP Over a year ago

more info about placeholder

Roy Over a year ago

If you want pre HTML5 support for the placeholder attribute i can recommend the jQuery Placeholder plugin (github.com/danielstocks/jQuery-Placeholder).

ORION Over a year ago

placeholder is a good idea, but it isn't supported by IE, so he will still need something in place to accommodate for IE users.

Soojoo · Accepted Answer · 2012-10-23 12:17:20Z

0

Try with

<html>
<head>
<script type="text/javascript">
    function Focus(i) {
        if (i.value == i.defaultValue) {
            i.value = "";
            i.style.color = "#000";
        }
    }

    function Blur(i) {
        if (i.value == "") {
            i.value = i.defaultValue;
            i.style.color = "#888";
        }
    }
</script>
</head>
<body>
    <input type="text" name="enter firstname" title="First Name" style="color:#888;"
    value="First Name" onfocus="Focus(this)" onblur="Blur(this)" />
    <input type="text" name="enterlastname" title="Last Name" style="color:#888;"
    value="lastname" onfocus="Focus(this)" onblur="Blur(this)" />
</body>

</html>

Note:script tags not inside body/head elements create invalid HTML

answered Oct 23, 2012 at 12:17

Soojoo

2,1661 gold badge30 silver badges58 bronze badges

1 Comment

sravan Over a year ago

I did not get what i expected. Please refer this link, It shows my quetion mozilla.org/en-US/contribute Under, WANT TO HELP, the text box has my question

Amol Kolekar · Accepted Answer · 2012-10-23 12:23:42Z

0

Try using "onkeydown" as following...

function Focus(cntrl,value)
{
    if (cntrl.value == value)
    {
       cntrl.value           = '';
       cntrl.style.color     = '#000';
    }
} 
function Blur(cntrl,value)
{
    if (cntrl.value == '') 
    {
       cntrl.style.color     = 'gray';
       cntrl.value           = value;                         
    }
}

<body>
     <input type="text" name="enter firstname" title="First Name" style="color:#888;"      value="First Name" onkeydown="Focus(this,'First Name')" onblur="Blur(this,'First Name')" />
     <input type="text" name="enterlastname" title="Last Name" style="color:#888;"      value="lastname" onkeydown="Focus(this,'lastname')" onblur="Blur(this,'lastname')" />
</body>

answered Oct 23, 2012 at 12:23

Amol Kolekar

2,3336 gold badges30 silver badges45 bronze badges

1 Comment

sravan Over a year ago

Thanks, I got the answer, but when the cursor is placed, the cursor is at last position, i.e at last letter. What should i do, to place the cursor at the 1st position

Collectives™ on Stack Overflow

Javascript to replicate placeholder functionality in input text

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related