HTML CSS Making a textbox with text that is grayed out and disappears when I click to enter info how

Question

How do I make a textbox that has a grayed out content  and when I click on it to enter text  the grayed out portion  it disappears and allows me to enter the desired text   Example   A  First Name  text box   The words  First Name  are inside the text box grayed out  when I click  those words disappear and I write my name in it

User · Accepted Answer

This answer illustrates a pre-HTML5 approach  Please take a look at Psytronic s answer for a modern solution using the placeholder attribute     HTML    lt input type  text  name  firstname  title  First Name  style  color  888        value  First Name  onfocus  inputFocus this   onblur  inputBlur this     gt    JavaScript   function inputFocus i        if  i value    i defaultValue    i value       i style color     000       function inputBlur i        if  i value          i value   i defaultValue  i style color     888

User · Answer

Chrome  Firefox  IE10 and Safari support the html5 placeholder attribute   lt input type  text  placeholder  First Name     gt   In order to get a more cross browser solution you ll need to use some javascript  there are plenty of pre-made solutions out there  though I don t know any off the top of my head   http   www w3schools com tags att input placeholder asp

User · Answer

This is an elaborate version  to help you understand  function setVolatileBehavior elem  onColor  offColor  promptText     changed spelling of function name to be the same as name used at invocation below elem addEventListener  change   function        if  document activeElement    elem  amp  amp  elem value  promptText           elem value             elem style color   onColor            else if  elem value               elem value promptText          elem style color   offColor            elem addEventListener  blur   function        if  document activeElement    elem  amp  amp  elem value  promptText           elem value             elem style color   onColor            else if  elem value               elem value promptText          elem style color   offColor            elem addEventListener  focus   function        if  document activeElement    elem  amp  amp  elem value  promptText           elem value             elem style color   onColor            else if  elem value               elem value promptText          elem style color   offColor            elem value promptText  elem style color offColor      Use like this   setVolatileBehavior document getElementById  yourElementID    black   gray   Name

User · Answer

The shortest way is to directly add the below code as additional attributes in the input type that you want to change   onfocus  if this value   Search  this value      onblur  if this value     this value  Search     Please note  Change the text  Search  to  go  or any other text to suit your requirements

User · Answer

You can use Floern s solution   You may also want to disable the input while you set the color to gray   http   www w3schools com tags att input disabled asp

User · Answer

If you re targeting HTML5 only you can use    lt input type  text  id  firstname  placeholder  First Name     gt    For non HTML5 browsers  I would build upon Floern s answer by using jQuery and make the javascript non-obtrusive   I would also use a class to define the blurred properties     document  ready function             Set the initial blur  unless its highlighted by default      inputBlur     Comments              Comments   blur function              inputBlur this                   Comments   focus function              inputFocus this                 Functions   function inputFocus i        if  i value    i defaultValue            i value                 i  removeClass  blurredDefaultText            function inputBlur i        if  i value          i value    i defaultValue            i value   i defaultValue            i  addClass  blurredDefaultText              CSS    blurredDefaultText       color  888  important

User · Answer

lt input type  quot text quot  id  quot firstname quot  placeholder  quot First Name quot   Note  You can change the placeholder  id and type value to  quot email quot  or whatever suits your need  More details by W3Schools at http   www w3schools com tags att input placeholder asp But by far the best solutions are by Floern and Vivek Mhatre   edited by j0k

User · Answer

Here s a one-liner slim way for layering text on top of an input in jQuery using ES6 syntax   x000D   x000D      input-group  gt  input   focus e   gt    e currentTarget  parent   find   placeholder   hide    blur e   gt    if     e currentTarget  val      e currentTarget  parent   find   placeholder   show        x000D        font-family  sans-serif      input-group     position  relative      input-group  gt  input     width  150px    padding  10px 0px 10px 25px      input-group  gt   placeholder     position  absolute    top  50     left  25px    transform  translateY -50      color   929292    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt div class  input-group  gt     lt span class  placeholder  gt Username lt  span gt     lt input gt   lt  div gt  x000D   x000D   x000D

User · Answer

With HTML5  you can do this natively with   lt input name  first name  placeholder  First Name  gt   This is not supported with all browsers though  IE   This may work    lt input type  first name  value  First Name  onfocus  this value  this defaultValue this value    null  gt    Otherwise  if you are using jQuery  you can use  focus and  css to change the color

[html] HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

Examples related to html

Examples related to css

Examples related to textbox