jquery-watermark plugin and HTML5 email input type not working correctly

Question

diveintohtml5 says it's okay to start using the email form type. So I am trying it out on one of my forms. I'm using jQuery and a plugin called jquery-watermark. It makes the placeholder element work across browsers. The plugin still works on Firefox 3.6 but on Opera 10.61 and Chrome 6 the placeholder isn't rendered.

<script type="text/javascript">
  $('form input#comment_email').watermark('email (optional)');
</script>

is used to display the watermark/placeholder.

Rails 3 outputs this:

<input id="comment_email" name="comment[email]" size="30" type="email" /> 

I'm not sure why it's not working. Any ideas what's going on here?

Answer 1

It looks as though the jquery-watermark plugin only selects certain input types to watermark. All you should have to do is tweak this line in jquery.watermark.js:

selWatermarkAble = ":text,:password,:search,textarea",

to include the new email type:

selWatermarkAble = ":text,:password,:search,:email,textarea",

Answer 2

Did you mean the placeholder texts in inputs?
There is an alternative solution: HTML 5 Placeholders, and Watermark is a good fallback to browsers that do not support placeholders.

 $('input[placeholder]').each(function() {
   $(this).watermark($(this).attr('placeholder'));
 })

(note: I did not test that code!)

(EDIT: See also http://diveintohtml5.org/detect.html#input-placeholder )