Created
April 15, 2011 04:35
Revisions
-
kentbrew revised this gist
Apr 15, 2011 . 1 changed file with 0 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -91,7 +91,6 @@ 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) { -
kentbrew revised this gist
Apr 15, 2011 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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')) { return; } console.log('making placeholders'); -
kentbrew revised this gist
Apr 15, 2011 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -105,4 +105,4 @@ }; }()); $.f.listen($.w, 'load', $.f.init); }(window, document, {'k': 'IP', 'style': {'fontSize':'87%', 'marginLeft':'5px', 'color':'#aaa'}})); -
kentbrew revised this gist
Apr 15, 2011 . 1 changed file with 31 additions and 24 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -5,30 +5,8 @@ $.d = d; $.f = (function () { return { 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) { -
kentbrew revised this gist
Apr 15, 2011 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 ('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) { -
kentbrew created this gist
Apr 15, 2011 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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'}})); This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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>