Onclick event to remove default value in a text input field

Question

I have an input field    lt input name  Name  value  Enter Your Name  gt    How would I get it to remove the pre-defined text  Enter Your Name  when the user clicks the box   As far as I am aware Javascript is the best way to do this  If that wrong please inform me

User · Answer

This is the right  cross-browser way to do it      lt input type  text  value  Enter Your Name  onfocus  if this value      Enter Your Name     this value           onblur  if this value          this value    Enter Your Name         gt

User · Answer

HTML5 Placeholder Attribute  You are likely wanting placeholder functionality    lt input name  Name  placeholder  Enter Your Name    gt    Polyfill for Older Browsers  This will not work in some older browsers  but polyfills exist  some require jQuery  others don t  to patch that functionality    Screw it  I ll do it myself    If you wanted to roll your own solution  you could use the onfocus and onblur events of your element to determine what its value should be    lt input name  Name  value  Enter Your Name         onfocus   this value     Enter Your Name    amp  amp   this value               onblur   this value         amp  amp   this value    Enter Your Name      gt    Avoid Mixing HTML with JavaScript  You ll find that most of us aren t big fans of evaluating JavaScript from attributes like onblur and onfocus  Instead  it s more commonly encouraged to bind this logic up purely with JavaScript  Granted  it s a bit more verbose  but it keeps a nice separation between your logic and your markup   var nameElement   document forms myForm Name   function nameFocus  e       var element   e target    window event srcElement    if  element value     Enter Your Name   element value          function nameBlur  e       var element   e target    window event srcElement    if  element value        element value    Enter Your Name      if   nameElement addEventListener       nameElement addEventListener  focus   nameFocus  false     nameElement addEventListener  blur   nameBlur  false     else if   nameElement attachEvent       nameElement attachEvent  onfocus   nameFocus     nameElement attachEvent  onblur   nameBlur       Demo  http   jsbin com azehum 2 edit

User · Answer

lt input name  Name  value  Enter Your Name  onfocus  freez this   onblur  freez this   gt    function freez obj     if obj value            obj value  Enter Your Name     else if obj value   Enter Your Name         obj value

User · Answer

Use onclick  this value        lt input name  Name  value  Enter Your Name  onclick  this value     gt

User · Answer

u can use placeholder and when u write a text on the search box placeholder will hidden  Thanks   lt input placeholder  Search  type  text    gt

User · Answer

In addition to placeholder  your text  you could also do onclick  this value      So it would look something like    lt input name  Name  value  Enter Your Name  onclick  this value     gt

User · Answer

You actually want to show a placeholder  HTML 5 offer this feature and it s very sweet    Try this out     lt input name  Name  placeholder  Enter Your Name  gt

User · Answer

This should do it   HTML   lt input name  Name  value  Enter Your Name  onClick  blankDefault  Enter Your Name   this   gt    JavaScript  function blankDefault  text   this        if  text     this value           this value           There are better less obtrusive ways though  but this will get the job done

User · Answer

As stated before I even saw this question placeholder is the answer  HTML5 for the win  But for those poor unfortunate souls that cannot rely on that functionality take a look at the jquery plugin as an augmentation as well  HTML5 Placeholder jQuery Plugin   lt input name  Name  placeholder  Enter Your Name  gt

[javascript] Onclick event to remove default value in a text input field

Examples related to javascript

Examples related to html