Archive for the ‘javascript’ Category

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. There is a good jQuery plugin called watermark which solves the problem but you need to apply it to the required fields, they suggest something like.

$( '#inputId' ).watermark( 'Required information' );

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. 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.

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<input type="text" placeholder="Put some text in here" name="textField" />
will display that placeholder text whether the user is running the latest version of Chrome or an antique version of Internet Explorer.