HN Explorer

8 comments

[ 4.6 ms ] story [ 32.8 ms ] thread
jokull
Placeholder is great. Found this for Django: http://github.com/rhec/django-html5/blob/master/html5/forms/... (however it looks shallow; I already spot that EmailField doesn't subclass the old EmailField which as server side validation). Would like to see these with their respective server side validators.
ionfish
Dive Into HTML5 [1] demonstrates how one can detect placeholder support; the obvious use case is to use the focus and blur events to mimic the functionality if native support isn't present.

Here's some example code, using Ojay [2].

    /**
     * Places the label for a text field within that field, for a simpler
     * and more intuitive interface to e.g. search forms.
     */
    var labelInField = function(field) {
        var input = Ojay(field), label = Ojay.Forms.getLabel(field).hide();
        if (!label.node || !input.node) return;
    
        var labelText = label.node.innerHTML.stripTags(),
            inputType = input.node.type || 'text';
    
        // Don't bother setting up the event handlers if the browser can detect
        // the HTML5 placeholder text.
        if ('placeholder' in document.createElement('input') && input.node.placeholder.length > 1) return;
    
        var focus = function() {
            input.removeClass('empty');
            if (input.node.value == labelText) input.node.value = '';
        };
    
        var blur = function() {
            if (input.node.value && input.node.value != labelText) return;
            input.addClass('empty');
            if (inputType == 'text') input.node.value = labelText;
        };
    
        blur();
    
        input.on('focus', focus);
        input.on('blur', blur);
    };
[1] http://diveintohtml5.org/forms.html#placeholder

[2] http://ojay.othermedia.org/

jeff18
Minor internet correction, the placeholder attribute has actually been in Safari since 2003. Also, Safari has supported range inputs for quite some time to.
JeffJenkins
I ran into an issue in 2006 because a coworker was clever and used a "date" input for a date. Most browsers just ignored it, but I was using Opera which implemented Web Forms 2.0. While I got a better experience (with a nice pop-up date picker), the form put the date in using the wrong format and his code couldn't read it.