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

User · Answer

Use the placeholder attribute  The text disappears when the user starts typing  This is an example of a project I am working on    lt div class    id  search-form  gt       lt input type  text  name    value    class  form-control  placeholder  Search      gt   lt  div gt

User · Answer

To accomplish that  you can use the two events onfocus and onblur    lt 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     gt

User · Answer

What you want to do is use the HTML5 attribute placeholder which lets you set a default value for your input box      lt input type  text  name  inputBox  placeholder  enter your text here  gt     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

User · Answer

Simple as this   lt input type  text  name  email  value  e-mail     onFocus  this value     gt

User · Answer

try this one out    lt label for  user  gt user lt  label gt   lt 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    gt    hope this helps

User · Answer

How about something like this    lt input name  myvalue  type  text  onfocus  if this value   enter value  this value      onblur  if this value     this value  enter value    gt   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

User · Answer

This is as simple I think the solution that should solve all your problems    lt input name  myvalue  id  valueText  type  text  value  ENTER VALUE  gt    This is your submit button    lt input type  submit  id   submitBtn  value  Submit  gt    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

[javascript] Text in HTML Field to disappear when clicked?

Examples related to javascript

Examples related to html

Examples related to user-interface

Examples related to dom-events