Setting an HTML text input box s default value Revert the value when clicking ESC

Question

When a web form is written to the browser  the browsers remembers what the initial values are of a text INPUT box  ie  when it receives HTML like this    lt input type  text  value  something  gt    The browser remembers  something  as the initial default value  When the user starts typing over it  then hits ESC  the browser reverts the field to the initial value  or blank if it was initially blank of course    However  when creating a text input box programatically  hitting ESC always seems to blank the box  even if I create it with a default value like so       lt input type  text  value  something  gt      The browser doesn t count this as a default value and doesn t revert to it when hitting ESC  So my question is  is there a way to create a text box in code and somehow assign it a default value  so the ESC key works as if the browser received it in the HTML document

User · Accepted Answer

This esc behavior is IE only by the way  Instead of using jQuery use good old javascript for creating the element and it works   var element   document createElement  input    element type    text   element value   100  document getElementsByTagName  body   0  appendChild element     http   jsfiddle net gGrf9   If you want to extend this functionality to other browsers then I would use jQuery s data object to store the default  Then set it when user presses escape     store default value for all elements on page  set new default on blur    input   each  function           this  data  default     this  val           this  blur  function       this  data  default     this  val                 input   keyup  function e        if  e keyCode    27      this  val   this  data  default

User · Answer

You might looking for the placeholder attribute which will display a grey text in the input field while empty   From Mozilla Developer Network      A hint to the user of what can be entered in the control   The   placeholder text must not contain carriage returns or line-feeds  This   attribute applies when the value of the type attribute is text    search  tel  url or email  otherwise it is ignored    However as it s a fairly  new  tag  from the HTML5 specification afaik  you might want to to browser testing to make sure your target audience is fine with this solution   If not tell tell them to upgrade browser  cause this tag works like a charm  o     And finally a mini-fiddle to see it directly in action  http   jsfiddle net LnU9t   Edit  Here is a plain jQuery solution which will also clear the input field if an escape keystroke is detected  http   jsfiddle net 3GLwE

User · Answer

See the defaultValue property of a text input  it s also used when you reset the form by clicking an  lt input type  reset   gt  button  http   www w3schools com jsref prop text defaultvalue asp    btw  defaultValue and placeholder text are different concepts  you need to see which one better fits your needs

User · Answer

If the question is   Is it possible to add value on ESC  than the answer is yes  You can do something like that  For example with use of jQuery it would look like below   HTML   lt script src    ajax googleapis com ajax libs jquery 1 7 1 jquery min js  type  text javascript  gt  lt  script gt    lt input type  text  value  default   id  myInput    gt    JavaScript    document  ready function             myInput   keyup function event               27 is key code of ESC         if  event keyCode    27                    myInput   val  default                    Loose focus on input field                 myInput   blur                            Working source can be found here  http   jsfiddle net S3N5H 1   Please let me know if you meant something different  I can adjust the code later

[html] Setting an HTML text input box's "default" value. Revert the value when clicking ESC

Examples related to html

Examples related to input

Examples related to default

Examples related to placeholder