{"id":376,"date":"2014-08-17T15:12:58","date_gmt":"2014-08-17T14:12:58","guid":{"rendered":"http:\/\/www.cotsweb.com\/blog\/?p=376"},"modified":"2014-08-17T15:12:58","modified_gmt":"2014-08-17T14:12:58","slug":"adding-placeholders-to-ie8-ie9-using-jquery","status":"publish","type":"post","link":"https:\/\/www.cotsweb.com\/blog\/adding-placeholders-to-ie8-ie9-using-jquery-376.html","title":{"rendered":"Adding placeholders to IE8 & IE9 using jQuery"},"content":{"rendered":"

The placeholder attribute on the input statement is a useful way of providing prompts to the user without cluttering up the screen, it is well supported by all modern browsers but sadly not by versions of Internet Explorer before IE10.\u00a0 There is a good jQuery plugin called watermark <\/a>which solves the problem but you need to apply it to the\u00a0 required fields, they suggest something like.<\/p>\n

$( '#inputId' ).watermark( 'Required information' );<\/code><\/p>\n

That is fine but I don’t really want to separately to each field, particularly if I have already populated the placeholder for each field.\u00a0 So being lazy I have written a little bit of jQuery which takes the existing placeholder for each field and adds it as a watermark.<\/p>\n

\n<script type="text\/javascript" src="js\/jquery.min.js"><\/script>\n<script type="text\/javascript" src="js\/jquery.watermark.min.js"><\/script>\n\n<script type="text\/javascript">\n   $(document).ready(function () {\n       \/*\n        * Set watermarks on input fields; IE8 & IE9 don't support placeholders\n        * This routine extracts the placeholder text from the HTML input statements and \n        *    passes it to the jQuery watermark plugin\n        * so we don't have to separately maintain the watermark text\n        *\/\n         $('[placeholder]').each(function () {\n           var placeholderText = $(this).attr('placeholder');\n           $(this).watermark(placeholderText);\n       });\n   });\n<\/script>\n<\/code><\/pre><\/p>\n
Obviously this requires that you have included jQuery and the jQuery watermark plugin earlier in your code as I have in the example but now every input field that I add a placeholder to
\n<input type="text" placeholder="Put some text in here" name="textField" \/><\/code>
\nwill display that placeholder text whether the user is running the latest version of Chrome or an antique version of Internet Explorer.<\/p>\n
I hope you find this useful.<\/p>\n","protected":false},"excerpt":{"rendered":"
The placeholder attribute on the input statement is a useful way of providing prompts to the user without cluttering up the screen, it is well supported by all modern browsers but sadly not by versions of Internet Explorer before IE10.\u00a0 There is a good jQuery plugin called watermark which solves the problem but you need […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[22,18],"tags":[102,135,134,133],"_links":{"self":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/376"}],"collection":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/comments?post=376"}],"version-history":[{"count":10,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/376\/revisions"}],"predecessor-version":[{"id":387,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/posts\/376\/revisions\/387"}],"wp:attachment":[{"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/media?parent=376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/categories?post=376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cotsweb.com\/blog\/wp-json\/wp\/v2\/tags?post=376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}