Text in HTML Field to disappear when clicked?

Question

I can easily create a html input field that has text already in it. But when the user clicks on the input field the text doesn't disappears but stays there. The user then has to manually remove the text to type. How can I create an input field where when the user clicks on the input field box the text then disappear?

[This is the modern way to do it.](https://stackoverflow.com/a/12250084/2454914) Lots of the answers here are outdated. — Mentalist, Oct 28 '21 at 06:59

score 172 · Answer 1 · edited Jun 11 '13 at 23:32

172

What you want to do is use the HTML5 attribute placeholder which lets you set a default value for your input box:

<input type="text" name="inputBox" placeholder="enter your text here">

This should achieve what you're looking for. However, be careful because the placeholder attribute is not supported in Internet Explorer 9 and earlier versions.

edited Jun 11 '13 at 23:32

nbura

368
3
15

answered Feb 22 '11 at 11:05

Nachshon Schwartz

15,289
20
59
98

input placeholer attribute does not support in IE9 and IE8... for more please go http://caniuse.com – Nur Rony Apr 22 '13 at 03:41
Is there a way to have the placeholder disappear when the user starts typing, but not disappear when the field is 'focused.'? – zero_cool Nov 12 '15 at 18:01

score 22 · Answer 2 · edited Apr 06 '14 at 06:42

22

To accomplish that, you can use the two events onfocus and onblur:

<input type="text" name="theName" value="DefaultValue"
  onblur="if(this.value==''){ this.value='DefaultValue'; this.style.color='#BBB';}"
  onfocus="if(this.value=='DefaultValue'){ this.value=''; this.style.color='#000';}"
  style="color:#BBB;" />

edited Apr 06 '14 at 06:42

Michael Myers

188,989
46
291
292

answered Oct 26 '09 at 17:53

BitDrink

1,185
1
18
24

1

and what if user doesn't enter the vlue,will it pass blank value or defaul value? my use case is also same like this but i want when user doesn't enter anything blank value should assign how do we go about it? Any suggestion? And no use of placholder attribute – mahesh Jun 28 '13 at 08:44
@mahesh What you can do is add a background image with your desired text written in it and add onClick event listener which makes the image invisible. – PG1 Jun 03 '14 at 07:11
this is a GREAT solution if you still have to support IE9! Thanks! – Daryl H Oct 20 '14 at 14:47

score 6 · Answer 3 · answered May 08 '12 at 13:10

6

try this one out.

<label for="user">user</label>
<input type="text" name="user" 
onfocus="if(this.value==this.defaultValue)this.value=''"    
onblur="if(this.value=='')this.value=this.defaultValue" 
value="username" maxlength="19" />

hope this helps.

answered May 08 '12 at 13:10

douglas olupoit

61
1
1

and what if user doesn't enter the vlue,will it pass blank value or defaul value? my use case is also same like this but i want when user doesn't enter anything blank value should assign how do we go about it? Any suggestion? And no use of placholder attribute – mahesh Jun 28 '13 at 08:44

score 6 · Answer 4 · answered Jul 11 '13 at 08:48

This is as simple I think the solution that should solve all your problems:

<input name="myvalue" id="valueText" type="text" value="ENTER VALUE">

This is your submit button:

<input type="submit" id= "submitBtn" value="Submit">

then put this small jQuery in a js file:

//this will submit only if the value is not default
$("#submitBtn").click(function () {
    if ($("#valueText").val() === "ENTER VALUE")
    {
        alert("please insert a valid value");
        return false;
    }
});

//this will put default value if the field is empty
$("#valueText").blur(function () {
    if(this.value == ''){ 
        this.value = 'ENTER VALUE';
    }
}); 

 //this will empty the field is the value is the default one
 $("#valueText").focus(function () {
    if (this.value == 'ENTER VALUE') {
        this.value = ''; 
    }
});

And it works also in older browsers. Plus it can easily be converted to normal javascript if you need.

Thanks it works on IE9 which we have to support. So I could not use the placeholder thing. To keep the setting of the value in the text box in one place I used jQuery to set the value in the box on document ready. $(document).ready(function () { /* set search input box value on load of document*/ $('#valueText').val("ENTER VALUE"); } — atsurti, Nov 26 '14 at 00:40
not work on Chrome Version -->> Version 81.0.4044.138 (Official Build) (64-bit) — Hadisur Rahman, May 17 '20 at 19:05

score 6 · Answer 5 · edited May 21 '19 at 13:04

6

Use the placeholder attribute. The text disappears when the user starts typing. This is an example of a project I am working on:

<div class="" id="search-form">
    <input type="text" name="" value="" class="form-control" placeholder="Search..." >
</div>

edited May 21 '19 at 13:04

vezunchik

3,669
3
16
25

answered May 21 '19 at 12:55

davidkihara

493
1
10
30

score 4 · Answer 6 · answered Sep 03 '13 at 10:27

4

Simple as this: <input type="text" name="email" value="e-mail..." onFocus="this.value=''">

answered Sep 03 '13 at 10:27

Bjössi Sveinbjörn Grétarsson

41
1

score 3 · Answer 7 · edited Feb 18 '15 at 09:40

3

How about something like this?

<input name="myvalue" type="text" onfocus="if(this.value=='enter value')this.value='';" onblur="if(this.value=='')this.value='enter value';">

This will clear upon focusing the first time, but then won't clear on subsequent focuses after the user enters their value, when left blank it restores the given value.

edited Feb 18 '15 at 09:40

Community

1
1

answered Oct 26 '09 at 17:36

mecsco

2,250
1
15
28

Text in HTML Field to disappear when clicked?

7 Answers7

Linked