{"id":279,"date":"2011-02-27T18:49:08","date_gmt":"2011-02-27T18:49:08","guid":{"rendered":"http:\/\/local.sandjam.co.uk\/?p=279"},"modified":"2018-08-03T14:00:10","modified_gmt":"2018-08-03T13:00:10","slug":"captionator-using-jquery","status":"publish","type":"post","link":"https:\/\/sandjam.co.uk\/sandjam\/2011\/02\/captionator-using-jquery\/","title":{"rendered":"Captionator using JQuery"},"content":{"rendered":"<p>A nice effect is to have the caption for a text field within the field instead of having a separate label.<br \/>\nHowever it can be frustrating for a user if they have to delete the text before they can type into it.<\/p>\n<p>This JavaScript class looks for texfields with a class of captionate and adds the label as the default text which will clear when a user clicks it.<\/p>\n<p>The benefits of this method are that it retains the proper markup by requiring field labels and it falls back gracefully by not hiding the label if the browser doesn&#8217;t support Javascript.<\/p>\n<h2>Demo<\/h2>\n<form>\n<fieldset><label for=\"namefield\">Your Name<\/label><input id=\"namefield\" class=\"captionate\" name=\"namefield\" type=\"text\" \/><\/fieldset>\n<\/form>\n<p>&nbsp;<\/p>\n<h2>Code<\/h2>\n<pre class=\"qoate-code\">\r\n&lt;script type=\"text\/javascript\"&gt;\/\/ &lt;![CDATA[ captionator = { captions:Array(), init:function() { $.each($('input.captionate'), function() { id = $(this).attr('id'); label = $(\"label[for='\"+id+\"']\"); if (label.length==0){ label = $(this).val(); } $(label).css('display', 'none'); captionator.captions[id] = label.text(); if ($(this).val()=='') { $(this).val(captionator.captions[id]); } $(this).click(function() { id = $(this).attr('id'); if ($(this).val()==captionator.captions[id]) { $(this).val(''); } }); $(this).blur(function() { id = $(this).attr('id'); if ($(this).val()=='') { $(this).val(captionator.captions[id]); } }); }); } } $(document).ready(function() { captionator.init(); }); \/\/ ]]&gt;&lt;\/script&gt;\r\n&lt;fieldset&gt;&lt;label for=\"namefield\"&gt;Your Name&lt;\/label&gt;\r\n&lt;input id=\"namefield\" class=\"captionate\" name=\"namefield\" type=\"text\" \/&gt;&lt;\/fieldset&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>A nice effect is to have the caption for a text field within the field instead of having a separate label. However it can be frustrating for a user if they have to delete the text before they can type into it. This JavaScript class looks for texfields with a class of captionate and adds [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[35,14,38],"class_list":["post-279","post","type-post","status-publish","format-standard","hentry","category-code","tag-css","tag-javascript","tag-jquery"],"acf":[],"_links":{"self":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/comments?post=279"}],"version-history":[{"count":51,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/279\/revisions"}],"predecessor-version":[{"id":1102,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/posts\/279\/revisions\/1102"}],"wp:attachment":[{"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/media?parent=279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/categories?post=279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sandjam.co.uk\/sandjam\/wp-json\/wp\/v2\/tags?post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}