Support for HTML5 placeholder attribute [#669878]

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

Comment	File	Size	Author
#8	compact_forms-placeholder-669878-8.patch	4.27 KB	jelle_s
#4	compact_forms_html5_placeholders.patch	2.24 KB	mstrelan

Comments

Comment #1

sun

German

Karlsruhe

commented 29 December 2009 at 12:24

A bit more details in the forms section:

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

Comment #2

mstrelan commented 2 August 2010 at 04:17

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

Comment #3

mstrelan commented 2 August 2010 at 05:44

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

Status	File	Size
new	compact_forms_html5_placeholders.patch	2.24 KB

Comment #5

sun

German

Karlsruhe

commented 5 September 2010 at 01:37

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.

Comment #6

mstrelan commented 6 September 2010 at 01:49

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.