Interestingly, one piece of this module's features is part of the HTML5 standard:

http://diveintohtml5.org/detect.html#input-placeholder

Some browsers seem to support the "placeholder" attribute already, so we can add dynamic support for it in our JS. (We still need to hide the label though.)

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

sun’s picture

A bit more details in the forms section:

http://diveintohtml5.org/forms.html#placeholder

mstrelan’s picture

Subscribe. Can this also please be added to the 6.x branch?

mstrelan’s picture

This is the code for 6.x


// some text removed

$.fn.compactForm = function (stars, colons) {
  stars = stars || 0;
  colons = colons || 0;
  placeholders = 'placeholder' in document.createElement('input');

  this.each(function () {
    var classes = 'compact-form' + (placeholders ? ' compact-form-html5' : '');
    $(this).addClass(classes).find('label').each(function () {
      var context = this.form;
      var $label = $(this);
      var $field = $('#' + $label.attr('for'), context);
      if (!$field.is('input:text,input:password,textarea')) {
        return;
      }
      if (placeholders) {
        $field.attr('placeholder', $label.text());
      }
      else {

// normal functionality here ...
mstrelan’s picture

Status: Active » Needs review
FileSize
2.24 KB

Patch against HEAD attached

sun’s picture

Status: Needs review » Needs work
+++ compact_forms.js	5 Aug 2010 05:20:51 -0000
@@ -7,9 +7,11 @@
+  placeholders = 'placeholder' in document.createElement('input');

This should use jQuery.support, and we should check whether there's also a common jQuery.support namespace for html5 features, so in case some other script already checked support, we simply re-use that value instead of detecting it again.

+++ compact_forms.js	5 Aug 2010 05:20:51 -0000
@@ -7,9 +7,11 @@
-    $(this).addClass('compact-form').find('label').each(function () {
+    var classes = 'compact-form' + (placeholders ? ' compact-form-html5' : '');
+    $(this).addClass(classes).find('label').each(function () {

Which features of the non-html5 variant do we actually want to keep?

My first guess was that we'd create an entirely separate if condition upfront here and handle html5 differently...? Thoughts?

Powered by Dreditor.

mstrelan’s picture

This should use jQuery.support, and we should check whether there's also a common jQuery.support namespace for html5 features, so in case some other script already checked support, we simply re-use that value instead of detecting it again.

According to http://api.jquery.com/jQuery.support/

While jQuery includes a number of properties, developers should feel free to add their own as their needs dictate. Many of the jQuery.support properties are rather low-level, so they are most useful for plugin and jQuery core development, rather than general day-to-day development.

I haven't found any examples of people using jQuery.support for this, only Modernizr. The convention for jQuery.support seems to be to just use camelCase for the feature you're detecting.

mgifford’s picture

How would this work with http://drupal.org/project/html5_tools - seems like there's room for collaboration from the http://groups.drupal.org/html5 community.

Jelle_S’s picture

Issue summary: View changes
Status: Needs work » Needs review
FileSize
4.27 KB

Rerolled patch

Christophe Bourgois’s picture

This patch (#8) is working for me also for version: 7.x-1.0.
Please apply this patch