{"id":623,"date":"2014-08-11T12:00:08","date_gmt":"2014-08-11T12:00:08","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=623"},"modified":"2014-08-11T12:00:08","modified_gmt":"2014-08-11T12:00:08","slug":"html5-placeholder-input-fields-fixed-with-jquery","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/html5-placeholder-input-fields-fixed-with-jquery\/","title":{"rendered":"HTML5 Placeholder Input Fields Fixed with jQuery"},"content":{"rendered":"<p>HTML5 added some new features for <code>input<\/code> and <code>textarea<\/code> fields. One is inspired by Safari\u2019s search box: <code>placeholder<\/code> This adds an default text if the textfield is empty:<\/p>\n<pre><code><b>&lt;<em>input<\/em><\/b> <b>type<\/b>=\"text\" <b>placeholder<\/b>=\"Fill me \u2026\"<b>&gt;<\/b>\r\n<\/code><\/pre>\n<h2 id=\"jQuery-Fix-for-All-Browsers\">jQuery Fix for All Browsers<\/h2>\n<p>Currently the <em>placeholder<\/em> works with the latest <a href=\"http:\/\/webkit.org\/\">Webkit<\/a> (Safari nightly build) and Chrome only. In Safari 4.0 placeholders won\u2019t appear in textareas. For all other browsers, the following short jQuery fix will help you. <code>$('[placeholder]')<\/code> selects all HTML elements with an placeholder attribute (textarea, input, and other elements).<\/p>\n<pre><code>$(<q>'[placeholder]'<\/q>).focus(<em>function<\/em>() {\r\n  <em>var<\/em> input = $(<em>this<\/em>);\r\n  <em>if<\/em> (input.val() == input.attr(<q>'placeholder'<\/q>)) {\r\n    input.val(<q>''<\/q>);\r\n    input.removeClass(<q>'placeholder'<\/q>);\r\n  }\r\n}).blur(<em>function<\/em>() {\r\n  <em>var<\/em> input = $(<em>this<\/em>);\r\n  <em>if<\/em> (input.val() == <q>''<\/q> || input.val() == input.attr(<q>'placeholder'<\/q>)) {\r\n    input.addClass(<q>'placeholder'<\/q>);\r\n    input.val(input.attr(<q>'placeholder'<\/q>));\r\n  }\r\n}).blur();\r\n<\/code><\/pre>\n<p>Don\u2019t forget the last <code>blur()<\/code> call. This one initializes the fields.<\/p>\n<pre><code>$(<q>'[placeholder]'<\/q>).parents(<q>'form'<\/q>).submit(<em>function<\/em>() {\r\n  $(<em>this<\/em>).find(<q>'[placeholder]'<\/q>).each(<em>function<\/em>() {\r\n    <em>var<\/em> input = $(<em>this<\/em>);\r\n    <em>if<\/em> (input.val() == input.attr(<q>'placeholder'<\/q>)) {\r\n      input.val(<q>''<\/q>);\r\n    }\r\n  })\r\n});\r\n<\/code><\/pre>\n<p>You\u2019ll find the whole <a href=\"http:\/\/gist.github.com\/379601\">code at github<\/a>.<\/p>\n<h2 id=\"CSS-Styling\">CSS Styling<\/h2>\n<p>While the placeholder is visible, the text field gets an additional <code>.placeholder<\/code> class. To make it look beautifully add a some CSS for a grey placeholder text:<\/p>\n<pre><code><b><i>.placeholder<\/i><\/b>\r\n{\r\n  <b>color:<\/b> #aaa;\r\n}\r\n<\/code><\/pre>\n<h2 id=\"Result\">Result<\/h2>\n<p>Here\u2019s the result\u2014it\u2019s tested and works in Safari, Firefox, Opera, Chrome and even Internet Explorer:<\/p>\n<div id=\"with-jquery\" class=\"result\">\n<form>Input field:<\/p>\n<fieldset><input type=\"text\" placeholder=\"Fill me \u2026\" \/> <input type=\"text\" value=\"Already filled, clear to see placeholder\" placeholder=\"Fill me \u2026\" \/><\/fieldset>\n<p>Textarea:<\/p>\n<fieldset><textarea placeholder=\"Start writing a book \u2026\"><\/textarea> <textarea placeholder=\"Start writing a book \u2026\">Already filled, clear to see placeholder<\/textarea><\/fieldset>\n<\/form>\n<\/div>\n<h2 id=\"CSS-Styling-of-the-HTML5-Attribute-Placeholder\">CSS Styling of the HTML5 Attribute Placeholder<\/h2>\n<p>But there\u2019s one more thing: Webkit users can even style their placeholder text. There\u2019s an temporarily pseudo element selector called <code>-webkit-input-placeholder<\/code>:<\/p>\n<pre><code><b><i>::-webkit-input-placeholder<\/i><\/b>\r\n{\r\n  <b>color:<\/b> <b>red<\/b>;\r\n  <b>font-weight:<\/b> <b>bold<\/b>;\r\n}\r\n<\/code><\/pre>\n<p>This one is pure <em>HTML5<\/em> and <em>CSS<\/em>. You should see bold red text for the placeholders (left side) and normal black text if there\u2019s user input (right side). It works in Webkit and Chrome only and partially in Safari:<\/p>\n<div id=\"pure-html5\" class=\"result\">\n<form>Input field:<\/p>\n<fieldset><input type=\"text\" placeholder=\"Fill me \u2026\" \/> <input type=\"text\" value=\"Already filled, clear to see placeholder\" placeholder=\"Fill me \u2026\" \/><\/fieldset>\n<p>Textarea:<\/p>\n<fieldset><textarea placeholder=\"Start writing a book \u2026\"><\/textarea> <textarea placeholder=\"Start writing a book \u2026\">Already filled, clear to see placeholder<\/textarea><\/fieldset>\n<\/form>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 added some new features for input and textarea fields. One is inspired by Safari\u2019s search box: placeholder This adds an default text if the textfield is empty: &lt;input type=&#8221;text&#8221; placeholder=&#8221;Fill me \u2026&#8221;&gt; jQuery Fix for All Browsers Currently the placeholder works with the latest Webkit (Safari nightly build) and Chrome only. In Safari 4.0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":624,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","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},"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/623"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=623"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/623\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/624"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=623"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=623"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}