{"id":3812,"date":"2009-09-04T10:47:26","date_gmt":"2009-09-04T17:47:26","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=3812"},"modified":"2009-09-04T10:48:14","modified_gmt":"2009-09-04T17:48:14","slug":"clear-field-on-focus","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/javascript\/clear-field-on-focus\/","title":{"rendered":"Clear Field on Focus"},"content":{"rendered":"<pre><code class=\"html\">&lt;input type=\"text\" onfocus=\"if(this.value == 'value') { this.value = ''; }\" value=\"value\" \/&gt;<\/code><\/pre>\n<p>Replace &#8220;value&#8221; with the default value. If the field is selected, the default value will go away. If the user has previously changed the field value, it&#8217;ll be left alone.<\/p>\n<p>Alternatively, use onfocus=&#8221;this.value=&#8221;;&#8221; to always clear the field.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;input type=&#8221;text&#8221; onfocus=&#8221;if(this.value == &#8216;value&#8217;) { this.value = &#8221;; }&#8221; value=&#8221;value&#8221; \/&gt; Replace &#8220;value&#8221; with the default value. If the field is selected, the default value will go away. If the user has previously changed the field value, it&#8217;ll be left alone. Alternatively, use onfocus=&#8221;this.value=&#8221;;&#8221; to always clear the field.<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3357,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":3272,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/clear-default-search-string-on-focus\/","url_meta":{"origin":3812,"position":0},"title":"Clear Default Search String on Focus","date":"August 7, 2009","format":false,"excerpt":"$(\"#s\") .val(\"Search...\") .css(\"color\", \"#ccc\") .focus(function(){ $(this).css(\"color\", \"black\"); if ($(this).val() == \"Search...\") { $(this).val(\"\"); } }) .blur(function(){ $(this).css(\"color\", \"#ccc\"); if ($(this).val() == \"\") { $(this).val(\"Search...\"); } }); Set value of field to \"Search...\" When field comes into focus, set color to black. If value is default, remove it. When field goes\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5732,"url":"https:\/\/css-tricks.com\/snippets\/html\/mailto-links\/","url_meta":{"origin":3812,"position":1},"title":"Mailto Links","date":"February 23, 2010","format":false,"excerpt":"Basic Open default mail program, create new message with the TO field already filled out. <a href=\"mailto:someone@yoursite.com\">Email Us<\/a> Adding a subject Open default mail program, create new message with the TO and SUBJECT field already filled out. Essentially we are adding the parameter subject to the href value. Spaces in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3361,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/setclear-default-input-value\/","url_meta":{"origin":3812,"position":2},"title":"Set\/Clear Default Input Value","date":"August 11, 2009","format":false,"excerpt":"$('.default-value').each(function() { var default_value = this.value; $(this).focus(function(){ if(this.value == default_value) { this.value = ''; } }); $(this).blur(function(){ if(this.value == '') { this.value = default_value; } }); });","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3661,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/using-custom-fields\/","url_meta":{"origin":3812,"position":3},"title":"Using Custom Fields","date":"September 3, 2009","format":false,"excerpt":"Dump out all custom fields as a list Display value of one specific custom field \"mood\" would be ID value of custom field Display multiple values of same custom field ID This post inspired by: Display custom field only if exists (logic)","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":252115,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/u\/user-invalid\/","url_meta":{"origin":3812,"position":4},"title":":user-invalid","date":"March 8, 2017","format":false,"excerpt":"The :user-invalid is a CSS pseudo-class that is under proposal in the CSS Selectors Level 4 working draft that selects a form element based on whether the value\u2014as entered by a user\u2014is valid when checked against the what is specified as an accepted value in the HTML markup after the\u2026","rel":"","context":"In \"form validation\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7275,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/styled-popup-menu\/","url_meta":{"origin":3812,"position":5},"title":"Styled Popup Menu","date":"August 25, 2010","format":false,"excerpt":"This idea is from Veer.com and how they handle the dropdowns for things like T-Shirt sizes. Thank you to Dennis Sa. View Demo HTML We'll wrap a regular text input inside an <div>, which also contains an unordered list which will represent the values for the popup menu. Male -\u2026","rel":"","context":"With 20 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3812"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=3812"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3812\/revisions"}],"predecessor-version":[{"id":3814,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3812\/revisions\/3814"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3357"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=3812"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=3812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}