Delete default value of an input text on click

Question

I have an input text     lt input name  Email  type  text  id  Email  value  email abc com    gt    I want to put a default value like  What s your programming question   be specific   in StackOverFlow  and when the user click on it the default value disapear

User · Accepted Answer

For future reference  I have to include the HTML5 way to do this    lt input name  Email  type  text  id  Email  value  email abc com  placeholder  What s your programming question   be specific     gt    If you have a HTML5 doctype and a HTML5-compliant browser  this will work  However  many browsers do not currently support this  so at least Internet Explorer users will not be able to see your placeholder  However  see http   www kamikazemusic com quick-tips jquery-html5-placeholder-fix    archive org version  for a solution  Using that  you ll be very modern and standards-compliant  while also providing the functionality to most users   Also  the provided link is a well-tested and well-developed solution  which should work out of the box

User · Answer

Here is an easy way    animal represents any buttons from the DOM   animal-value is the input id that being targeted       animal   on  click   function        var userVal       animal-value   val       storing that value     console log userVal      logging the stored value to the console         animal-value   val        reseting it to empty

User · Answer

lt input name  Email  type  text  id  Email  placeholder  enter your question    gt   The placeholder attribute specifies a short hint that describes the expected value of an input field  e g  a sample value or a short description of the expected format    The short hint is displayed in the input field before the user enters a value   Note  The placeholder attribute works with the following input types  text  search  url  tel  email  and password   I think this will help

User · Answer

This is somewhat cleaner  i think  Note the usage of the  defaultValue  property of the input    lt script gt  function onBlur el        if  el value                  el value   el defaultValue          function onFocus el        if  el value    el defaultValue            el value                lt  script gt   lt form gt   lt input type  text  value   some default value   onblur  onBlur this   onfocus  onFocus this     gt   lt  form gt

User · Answer

Using jQuery  you can do      input text   each function             store default value     var v   this value         this  blur function                     if input is empty  reset value to default          if  this value length    0  this value   v         focus function                     when input is focused  clear its contents         this value                      And you could stuff all this into a custom plug-in  like so   jQuery fn hideObtrusiveText   function          return this each function                  var v   this value             this  blur function                          if  this value length    0  this value   v             focus function                          this value                                 Here s how you would use the plug-in      input text   hideObtrusiveText      Advantages to using this code is    Its unobtrusive and doesn t pollute the DOM Code re-use  it works on multiple fields It figures out the default value of inputs by itself    Non-jQuery approach   function hideObtrusiveText id        var e   document getElementById id        var v   e value       e onfocus   function                  e value                   e onblur   function                  if  e value length    0  e value   v

User · Answer

Enter the following  inside the  tag  just add onFocus  value     so that your final code looks like this     lt input type  email  id  Email  onFocus  value     gt     This makes use of the javascript onFocus   event holder

User · Answer

Here is a jQuery solution  I always let the default value reappear when a user clears the input field    lt input name  Email  value  What s your programming question   be specific   type  text  id  Email  value  email abc com    gt    lt script gt      Email   blur      function             if    this  val                        this  val   this  prop  defaultValue                 focus      function             if    this  val        this  prop  defaultValue                  this  val                lt  script gt

User · Answer

EDIT  Although  this solution works  I would recommend you try MvanGeest s solution below which uses the placeholder-attribute and a javascript fallback for browsers which don t support it yet   If you are looking for a Mootools equivalent to the JQuery fallback in MvanGeest s reply  here is one   --  You should probably use onfocus and onblur events in order to support keyboard users who tab through forms   Here s an example    lt input type  text  value  email abc com  name  Email  id  Email   onblur  if  this value         this value    email abc com      onfocus  if  this value     email abc com    this value           gt

User · Answer

I didn t see any really simple answers like this one  so maybe it will help someone out   var inputText   document getElementById  inputText    inputText onfocus   function    if  inputText value         inputText value           inputText onblur   function    if  inputText value     default value    inputText value    default value

User · Answer

we can do it without using js in the following way using the  placeholder  attribute of html5    the default text disappears when the user starts to type in  but not on just clicking     lt input type  email  id  email  placeholder  xyz abc com  gt   see this  http   www w3schools com html tryit asp filename tryhtml5 input placeholder

User · Answer

Just use a placeholder tag in your input instead of value

User · Answer

Why remove value  its useful  but why not try CSS  input submit       font-size  0  important      Value is important to check  amp  validate ur PHP

User · Answer

Here is very simple javascript  It works fine for me       JavaScript   function sFocus  field        if field value     Enter your search             field value                 field className    darkinput      function sBlur  field        if  field value                  field value    Enter your search           field className    lightinput             else           field className    darkinput              HTML  lt form gt     lt label class  screen-reader-text  for  s  gt Search for lt  label gt     lt input     type  text      class  lightinput      onfocus  sFocus this        onblur  sBlur this       value  Enter your search  name  s  id  s      gt   lt  form gt

[javascript] Delete default value of an input text on click

Examples related to javascript

Examples related to html

Examples related to input

Examples related to default-value