{"id":3272,"date":"2009-08-07T12:59:13","date_gmt":"2009-08-07T19:59:13","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=3272"},"modified":"2009-08-07T12:59:13","modified_gmt":"2009-08-07T19:59:13","slug":"clear-default-search-string-on-focus","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/jquery\/clear-default-search-string-on-focus\/","title":{"rendered":"Clear Default Search String on Focus"},"content":{"rendered":"<pre><code class=\"javascript\">$(\"#s\")\r\n    .val(\"Search...\")\r\n    .css(\"color\", \"#ccc\")\r\n    .focus(function(){\r\n        $(this).css(\"color\", \"black\");\r\n        if ($(this).val() == \"Search...\") {\r\n            $(this).val(\"\");\r\n        }\r\n    })\r\n    .blur(function(){\r\n        $(this).css(\"color\", \"#ccc\");\r\n        if ($(this).val() == \"\") {\r\n            $(this).val(\"Search...\");\r\n        }\r\n    });<\/code><\/pre>\n<ol>\n<li>Set value of field to &#8220;Search&#8230;&#8221;<\/li>\n<li>When field comes into focus, set color to black.<\/li>\n<li>If value is default, remove it.<\/li>\n<li>When field goes out of focus, set color back to light gray.<\/li>\n<li>If value is empty, put back default value<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>$(&#8220;#s&#8221;) .val(&#8220;Search&#8230;&#8221;) .css(&#8220;color&#8221;, &#8220;#ccc&#8221;) .focus(function(){ $(this).css(&#8220;color&#8221;, &#8220;black&#8221;); if ($(this).val() == &#8220;Search&#8230;&#8221;) { $(this).val(&#8220;&#8221;); } }) .blur(function(){ $(this).css(&#8220;color&#8221;, &#8220;#ccc&#8221;); if ($(this).val() == &#8220;&#8221;) { $(this).val(&#8220;Search&#8230;&#8221;); } }); Set value of field to &#8220;Search&#8230;&#8221; When field comes into focus, set color to black. If value is default, remove it. When field goes out of focus, set color [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":3245,"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":7275,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/styled-popup-menu\/","url_meta":{"origin":3272,"position":0},"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":[]},{"id":21353,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/mover-cursor-to-end-of-textarea\/","url_meta":{"origin":3272,"position":1},"title":"Mover Cursor to End of Textarea","date":"April 20, 2013","format":false,"excerpt":"Setting the value of a textarea moves the cursor to the end. So you just need to save the value, clear it, focus it, and re-apply the value and you're good. $(\"button\").on(\"click\", function() { \/\/ cache textarea as we need it more than once var textarea = $(\"textarea\"), \/\/ save\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3492,"url":"https:\/\/css-tricks.com\/snippets\/jquery\/inputs-that-remember-original-value\/","url_meta":{"origin":3272,"position":2},"title":"Inputs That Remember Original Value","date":"August 21, 2009","format":false,"excerpt":"var origValue = []; $('input.remember').each ( function (currentIndex) { origValue.push ( $(this).val () ); $(this).focus ( function () { $(this).removeClass(\"unfocused\"); var defaultText = $(this).val(); if ( $(this).val () == origValue [ currentIndex ] ) { $(this).val(''); } $(this).blur(function() { var userInput = $(this).val(); if (userInput == '') { $(this).val(defaultText); $(this).addClass(\"unfocused\");\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3812,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/clear-field-on-focus\/","url_meta":{"origin":3272,"position":3},"title":"Clear Field on Focus","date":"September 4, 2009","format":false,"excerpt":"Replace \"value\" 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'll be left alone. Alternatively, use onfocus=\"this.value='';\" to always clear the field.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191783,"url":"https:\/\/css-tricks.com\/snippets\/sass\/deep-getset-maps\/","url_meta":{"origin":3272,"position":4},"title":"Deep Get\/Set in Maps","date":"December 29, 2014","format":false,"excerpt":"When working on complex Sass architectures, it is not uncommon to use Sass maps to maintain configuration and options. From time to time, you'll see maps within maps (possibly on several levels) like this one from o-grid: $o-grid-default-config: ( columns: 12, gutter: 10px, min-width: 240px, max-width: 1330px, layouts: ( S:\u2026","rel":"","context":"With 11 comments","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":3272,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3272"}],"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=3272"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3272\/revisions"}],"predecessor-version":[{"id":3273,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3272\/revisions\/3273"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3245"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=3272"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=3272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}