{"id":1548,"date":"2010-06-17T12:56:46","date_gmt":"2010-06-17T02:56:46","guid":{"rendered":"https:\/\/eisabainyo.net\/weblog\/?p=1548"},"modified":"2010-06-17T13:01:30","modified_gmt":"2010-06-17T03:01:30","slug":"clear-default-text-in-input-boxes-on-click-with-jquery","status":"publish","type":"post","link":"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/","title":{"rendered":"Clear default text in input boxes on click with jQuery"},"content":{"rendered":"<p>The following Javascript will clear default text value in input boxes when you click on them.  To trigger the Javascript, you'll need to specify both title and value attributes and set class of the input field to \"text\".  jQuery library is required for this to work.  <\/p>\n<p><strong>Javascript<\/strong><\/p>\n<pre>\r\n$('.text').focus(function () {\r\n\tif ($(this).val() == $(this).attr(\"title\")) {\r\n\t\t$(this).val(\"\");\r\n\t}\r\n}).blur(function () {\r\n\tif ($(this).val() == \"\") {\r\n\t\t$(this).val($(this).attr(\"title\"));\r\n\t}\r\n});\r\n<\/pre>\n<p>Examples: <\/p>\n<pre>\r\n&lt;input type=&quot;text&quot; name=&quot;q&quot; class=&quot;q text&quot; value=&quot;Search for terms&quot; title=&quot;Search for terms&quot; \/&gt;\r\n\r\n&lt;input type=&quot;password&quot; name=&quot;password&quot; class=&quot;text&quot; value=&quot;Password&quot; title=&quot;Password&quot;  \/&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The following Javascript will clear default text value in input boxes when you click on<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-1548","post","type-post","status-publish","format-standard","hentry","category-snippets"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Clear default text in input boxes on click with jQuery | Tech Leadership Advice &amp; Resources<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Clear default text in input boxes on click with jQuery | Tech Leadership Advice &amp; Resources\" \/>\n<meta property=\"og:description\" content=\"The following Javascript will clear default text value in input boxes when you click on\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Tech Leadership Advice &amp; Resources\" \/>\n<meta property=\"article:published_time\" content=\"2010-06-17T02:56:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2010-06-17T03:01:30+00:00\" \/>\n<meta name=\"author\" content=\"Isabel Nyo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Isabel Nyo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/\"},\"author\":{\"name\":\"Isabel Nyo\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"headline\":\"Clear default text in input boxes on click with jQuery\",\"datePublished\":\"2010-06-17T02:56:46+00:00\",\"dateModified\":\"2010-06-17T03:01:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/\"},\"wordCount\":59,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"articleSection\":[\"Snippets\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/\",\"name\":\"Clear default text in input boxes on click with jQuery | Tech Leadership Advice &amp; Resources\",\"isPartOf\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\"},\"datePublished\":\"2010-06-17T02:56:46+00:00\",\"dateModified\":\"2010-06-17T03:01:30+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eisabainyo.net\/weblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Clear default text in input boxes on click with jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#website\",\"url\":\"https:\/\/eisabainyo.net\/weblog\/\",\"name\":\"Career Resources for Professionals in Tech\",\"description\":\"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering &amp; Technology Directors\",\"publisher\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab\",\"name\":\"Isabel Nyo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g\",\"caption\":\"Isabel Nyo\"},\"logo\":{\"@id\":\"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/\"},\"description\":\"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more..\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Clear default text in input boxes on click with jQuery | Tech Leadership Advice &amp; Resources","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/","og_locale":"en_US","og_type":"article","og_title":"Clear default text in input boxes on click with jQuery | Tech Leadership Advice &amp; Resources","og_description":"The following Javascript will clear default text value in input boxes when you click on","og_url":"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/","og_site_name":"Tech Leadership Advice &amp; Resources","article_published_time":"2010-06-17T02:56:46+00:00","article_modified_time":"2010-06-17T03:01:30+00:00","author":"Isabel Nyo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Isabel Nyo","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/#article","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/"},"author":{"name":"Isabel Nyo","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"headline":"Clear default text in input boxes on click with jQuery","datePublished":"2010-06-17T02:56:46+00:00","dateModified":"2010-06-17T03:01:30+00:00","mainEntityOfPage":{"@id":"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/"},"wordCount":59,"commentCount":5,"publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"articleSection":["Snippets"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/","url":"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/","name":"Clear default text in input boxes on click with jQuery | Tech Leadership Advice &amp; Resources","isPartOf":{"@id":"https:\/\/eisabainyo.net\/weblog\/#website"},"datePublished":"2010-06-17T02:56:46+00:00","dateModified":"2010-06-17T03:01:30+00:00","breadcrumb":{"@id":"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/eisabainyo.net\/weblog\/2010\/06\/17\/clear-default-text-in-input-boxes-on-click-with-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eisabainyo.net\/weblog\/"},{"@type":"ListItem","position":2,"name":"Clear default text in input boxes on click with jQuery"}]},{"@type":"WebSite","@id":"https:\/\/eisabainyo.net\/weblog\/#website","url":"https:\/\/eisabainyo.net\/weblog\/","name":"Career Resources for Professionals in Tech","description":"Books, worksheets, templates, frameworks and other useful resources for Chief Technology Officers (CTOs), VPs of Engineering &amp; Technology Directors","publisher":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eisabainyo.net\/weblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/33457dd19f1ad9bbd4b0cb50c54dfcab","name":"Isabel Nyo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d4b1a4e0f425adb39b242b0d62c5fac07c82f8314a24631f1d16f47bdf006d8?s=96&d=mm&r=g","caption":"Isabel Nyo"},"logo":{"@id":"https:\/\/eisabainyo.net\/weblog\/#\/schema\/person\/image\/"},"description":"My interests: Web Development, Web Design, Web Applications, Web 2.0, AJAX, Search Engine Optimisation, Latest Technologies and more.."}]}},"_links":{"self":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1548","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/comments?post=1548"}],"version-history":[{"count":4,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1548\/revisions"}],"predecessor-version":[{"id":1552,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/posts\/1548\/revisions\/1552"}],"wp:attachment":[{"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/media?parent=1548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/categories?post=1548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eisabainyo.net\/weblog\/wp-json\/wp\/v2\/tags?post=1548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}