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?

Solution 1

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.

Solution 2

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;" />

Solution 3

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>

Solution 4

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.

Solution 5

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.

View more solutions

Comments

[Nur Rony]

input placeholer attribute does not support in IE9 and IE8... for more please go caniuse.com

[mahesh]

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]

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

[Parag Gangil]

@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.

[Daryl H]

this is a GREAT solution if you still have to support IE9! Thanks!

[atsurti]

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"); }

[zero_cool]

Is there a way to have the placeholder disappear when the user starts typing, but not disappear when the field is 'focused.'?

[Hadisur Rahman]

not work on Chrome Version -->> Version 81.0.4044.138 (Official Build) (64-bit)