Skip to content

Instantly share code, notes, and snippets.

@kentbrew
Created April 15, 2011 04:35

Revisions

  1. kentbrew revised this gist Apr 15, 2011. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion behavior.js
    Original file line number Diff line number Diff line change
    @@ -91,7 +91,6 @@
    if ('placeholder' in $.d.createElement('INPUT')) {
    return;
    }
    console.log('making placeholders');
    var el, input, i, n, placeholder;
    input = $.d.getElementsByTagName('INPUT');
    for (i = 0, n = input.length; i < n; i = i + 1) {
  2. kentbrew revised this gist Apr 15, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion behavior.js
    Original file line number Diff line number Diff line change
    @@ -88,7 +88,7 @@
    },
    init : function () {
    // no need to do any of this for browsers that understand placeholders
    if ('placeholder' in $.d.createElement('input')) {
    if ('placeholder' in $.d.createElement('INPUT')) {
    return;
    }
    console.log('making placeholders');
  3. kentbrew revised this gist Apr 15, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion behavior.js
    Original file line number Diff line number Diff line change
    @@ -105,4 +105,4 @@
    };
    }());
    $.f.listen($.w, 'load', $.f.init);
    }(window, document, {'k': 'INPUT-PLACEHOLDERS', 'style': {'fontSize':'87%', 'marginLeft':'5px', 'color':'#aaa'}}));
    }(window, document, {'k': 'IP', 'style': {'fontSize':'87%', 'marginLeft':'5px', 'color':'#aaa'}}));
  4. kentbrew revised this gist Apr 15, 2011. 1 changed file with 31 additions and 24 deletions.
    55 changes: 31 additions & 24 deletions behavior.js
    Original file line number Diff line number Diff line change
    @@ -5,30 +5,8 @@
    $.d = d;
    $.f = (function () {
    return {
    focus: function (e) {
    var v = e || $.w.event, el = $.f.getEl(v), span = $.f.getPrev(el);
    if (span) {
    span.style.display = 'none';
    }
    },
    blur: function (e) {
    var v = e || $.w.event, el = $.f.getEl(v), span = $.f.getPrev(el);
    if (span && span.tagName === 'SPAN') {
    if (!el.value) {
    // field has no value; show label
    span.style.display = 'block';
    } else {
    // field has value; hide label
    span.style.display = 'none';
    }
    }
    },
    down: function (e) {
    var v = e || $.w.event, el = $.f.getEl(v);
    el.style.display = 'none';
    $.f.getNext(el).focus();
    },
    getEl: function (v) {
    // helper: which is the target of this event?
    var el;
    if (v.target) {
    el = (v.target.nodeType === 3) ? v.target.parentNode : v.target;
    @@ -39,20 +17,48 @@
    return el;
    },
    getPrev : function (el) {
    // helper: which is this element's previous sibling?
    var prevSib = el.previousSibling;
    if (prevSib && prevSib.nodeType !== 1) {
    prevSib = prevSib.previousSibling;
    }
    return prevSib;
    },
    getNext : function (el) {
    // helper: which is this element's next sibling?
    var nextSib = el.nextSibling;
    if (nextSib && nextSib.nodeType !== 1) {
    nextSib = nextSib.nextSibling;
    }
    return nextSib;
    },
    focus: function (e) {
    var v = e || $.w.event, el = $.f.getEl(v), span = $.f.getPrev(el);
    if (span) {
    // always hide the placeholder
    span.style.display = 'none';
    }
    },
    blur: function (e) {
    var v = e || $.w.event, el = $.f.getEl(v), span = $.f.getPrev(el);
    if (span && span.tagName === 'SPAN') {
    if (!el.value) {
    // field has no value; show placeholder
    span.style.display = 'block';
    } else {
    // field has value; hide placeholder
    span.style.display = 'none';
    }
    }
    },
    down: function (e) {
    var v = e || $.w.event, span = $.f.getEl(v);
    // always hide the placeholder
    span.style.display = 'none';
    $.f.getNext(span).focus();
    },
    listen : function (el, ev, fn) {
    // helper: gracefully attach an event
    if(typeof $.w.addEventListener !== 'undefined') {
    el.addEventListener(ev, fn, false);
    } else if(typeof $.w.attachEvent !== 'undefined') {
    @@ -84,7 +90,8 @@
    // no need to do any of this for browsers that understand placeholders
    if ('placeholder' in $.d.createElement('input')) {
    return;
    }
    }
    console.log('making placeholders');
    var el, input, i, n, placeholder;
    input = $.d.getElementsByTagName('INPUT');
    for (i = 0, n = input.length; i < n; i = i + 1) {
  5. kentbrew revised this gist Apr 15, 2011. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions behavior.js
    Original file line number Diff line number Diff line change
    @@ -82,9 +82,9 @@
    },
    init : function () {
    // no need to do any of this for browsers that understand placeholders
    if ($.d.createElement('INPUT').getAttribute('placeholder')) {
    if ('placeholder' in $.d.createElement('input')) {
    return;
    }
    }
    var el, input, i, n, placeholder;
    input = $.d.getElementsByTagName('INPUT');
    for (i = 0, n = input.length; i < n; i = i + 1) {
  6. kentbrew created this gist Apr 15, 2011.
    101 changes: 101 additions & 0 deletions behavior.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,101 @@
    (function (w, d, a) {
    var $ = w[a.k] = {};
    $.a = a;
    $.w = w;
    $.d = d;
    $.f = (function () {
    return {
    focus: function (e) {
    var v = e || $.w.event, el = $.f.getEl(v), span = $.f.getPrev(el);
    if (span) {
    span.style.display = 'none';
    }
    },
    blur: function (e) {
    var v = e || $.w.event, el = $.f.getEl(v), span = $.f.getPrev(el);
    if (span && span.tagName === 'SPAN') {
    if (!el.value) {
    // field has no value; show label
    span.style.display = 'block';
    } else {
    // field has value; hide label
    span.style.display = 'none';
    }
    }
    },
    down: function (e) {
    var v = e || $.w.event, el = $.f.getEl(v);
    el.style.display = 'none';
    $.f.getNext(el).focus();
    },
    getEl: function (v) {
    var el;
    if (v.target) {
    el = (v.target.nodeType === 3) ? v.target.parentNode : v.target;
    }
    else {
    el = v.srcElement;
    }
    return el;
    },
    getPrev : function (el) {
    var prevSib = el.previousSibling;
    if (prevSib && prevSib.nodeType !== 1) {
    prevSib = prevSib.previousSibling;
    }
    return prevSib;
    },
    getNext : function (el) {
    var nextSib = el.nextSibling;
    if (nextSib && nextSib.nodeType !== 1) {
    nextSib = nextSib.nextSibling;
    }
    return nextSib;
    },
    listen : function (el, ev, fn) {
    if(typeof $.w.addEventListener !== 'undefined') {
    el.addEventListener(ev, fn, false);
    } else if(typeof $.w.attachEvent !== 'undefined') {
    el.attachEvent('on' + ev, fn);
    }
    },
    makePlaceholder : function (input, placeholder) {
    var span, rule;
    if (input.type === 'text' || input.type === 'password' ) {
    span = $.d.createElement('SPAN');
    span.innerHTML = placeholder;
    span.style.position = 'absolute';
    span.style.lineHeight = input.offsetHeight + 'px';
    for (rule in $.a.style) {
    if ($.a.style.hasOwnProperty(rule)) {
    span.style[rule] = $.a.style[rule];
    }
    }
    if (input.value) {
    span.style.display = 'none';
    }
    input.parentNode.insertBefore(span, input);
    $.f.listen(span, 'mousedown', $.f.down);
    $.f.listen(input, 'focus', $.f.focus);
    $.f.listen(input, 'blur', $.f.blur);
    }
    },
    init : function () {
    // no need to do any of this for browsers that understand placeholders
    if ($.d.createElement('INPUT').getAttribute('placeholder')) {
    return;
    }
    var el, input, i, n, placeholder;
    input = $.d.getElementsByTagName('INPUT');
    for (i = 0, n = input.length; i < n; i = i + 1) {
    el = input[i];
    placeholder = el.getAttribute('placeholder');
    if (placeholder) {
    $.f.makePlaceholder(el, placeholder);
    }
    }
    }
    };
    }());
    $.f.listen($.w, 'load', $.f.init);
    }(window, document, {'k': 'INPUT-PLACEHOLDERS', 'style': {'fontSize':'87%', 'marginLeft':'5px', 'color':'#aaa'}}));
    3 changes: 3 additions & 0 deletions structure.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <p><input type="text" placeholder="username" value="foo" /></p>
    <p><input type="password" placeholder="password1" /></p>
    <p><input type="password" placeholder="password2" /></p>