Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Add Password Support #11

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add Password Support #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
449e8f8
Updated script tag to point to newly named placeholder js file
Feb 2, 2011
440eab2
Add password field support
Mar 14, 2013
c27895e
Update README.md
Mar 14, 2013
b3f60e4
IE8 Doesn't like changing input type with jQuery
Mar 14, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,18 @@ Extra attention has been paid to make sure that elements behave correctly when u
* Programmatically changing a placeholder element with .val('string') will remove the placeholder class
* With .placeholder({preventRefreshIssues:true}) a placeholder will be assigned autocomplete="off" to prevent browsers from filling an element with the placeholder text on refresh


## Usage

```javascript
$(function(){
$('input[placeholder], textarea[placeholder]').placeholder();
});
```

Easy.

## Note

Initially forked from https://github.com/andrewrjones/jquery-placeholder-plugin/downloads

220 changes: 110 additions & 110 deletions src/jquery.placeholder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,116 +1,116 @@
(function($) {
$.extend({
placeholder : {
settings : {
focusClass: 'placeholderFocus',
activeClass: 'placeholder',
overrideSupport: false,
preventRefreshIssues: true
},
debug : false,
log : function(msg){
if(!$.placeholder.debug) return;
msg = "[Placeholder] " + msg;
$.placeholder.hasFirebug ?
console.log(msg) :
$.placeholder.hasConsoleLog ?
window.console.log(msg) :
alert(msg);
},
hasFirebug : "console" in window && "firebug" in window.console,
hasConsoleLog: "console" in window && "log" in window.console
}
$.extend({
placeholder: {
settings: {
focusClass: 'placeholder-focus',
activeClass: 'placeholder',
passwordClass: 'placeholder-password',
overrideSupport: false,
preventRefreshIssues: true
},
debug: false,
log: function(msg) {
if (!$.placeholder.debug) return;
msg = "[Placeholder] " + msg;
$.placeholder.hasFirebug ? console.log(msg) : $.placeholder.hasConsoleLog ? window.console.log(msg) : alert(msg);
},
hasFirebug: "console" in window && "firebug" in window.console,
hasConsoleLog: "console" in window && "log" in window.console
}

});

// check browser support for placeholder
$.support.placeholder = 'placeholder' in document.createElement('input');

// Replace the val function to never return placeholders
$.fn.plVal = $.fn.val;
$.fn.val = function(value) {
$.placeholder.log('in val');
if(this[0]) {
$.placeholder.log('have found an element');
var el = $(this[0]);
if(value != undefined)
{
$.placeholder.log('in setter');
var currentValue = el.plVal();
var returnValue = $(this).plVal(value);
if(el.hasClass($.placeholder.settings.activeClass) && currentValue == el.attr('placeholder')){
el.removeClass($.placeholder.settings.activeClass);
}
return returnValue;
}
});

// check browser support for placeholder
$.support.placeholder = 'placeholder' in document.createElement('input');

// Replace the val function to never return placeholders
$.fn.plVal = $.fn.val;
$.fn.val = function(value) {
$.placeholder.log('in val');
if (this[0]) {
$.placeholder.log('have found an element');
var el = $(this[0]);
if (value != undefined) {
$.placeholder.log('in setter');
var currentValue = el.plVal();
var returnValue = $(this).plVal(value);
$.placeholder.log("Current: " + currentValue);
console.log(returnValue);
if (el.hasClass($.placeholder.settings.activeClass) && currentValue == el.attr('placeholder')) {
el.removeClass($.placeholder.settings.activeClass);
}
return returnValue;
}

if (el.hasClass($.placeholder.settings.activeClass) && el.plVal() == el.attr('placeholder')) {
$.placeholder.log('returning empty because it\'s a placeholder');
return '';
} else {
$.placeholder.log('returning original val');
return el.plVal();
}
}
$.placeholder.log('returning undefined');
return undefined;
};

// Clear placeholder values upon page reload
$(window).bind('beforeunload.placeholder', function() {
var els = $('input.' + $.placeholder.settings.activeClass);
if (els.length > 0) els.val('').attr('autocomplete', 'off');
});


// plugin code
$.fn.placeholder = function(opts) {
opts = $.extend({}, $.placeholder.settings, opts);

// we don't have to do anything if the browser supports placeholder
if (!opts.overrideSupport && $.support.placeholder) return this;

return this.each(function() {
var $el = $(this);

// skip if we do not have the placeholder attribute
if (!$el.is('[placeholder]')) return;

// Prevent values from being reapplied on refresh
if (opts.preventRefreshIssues) $el.attr('autocomplete', 'off');

$el.bind('focus.placeholder', function() {
var $el = $(this);
if (this.value == $el.attr('placeholder') && $el.hasClass(opts.activeClass)) $el.val('').removeClass(opts.activeClass).addClass(opts.focusClass);
if ($el.hasClass(opts.passwordClass)){
$el.removeClass(opts.passwordClass);
$el.get().type = 'password';

}
});
$el.bind('blur.placeholder', function() {
var $el = $(this);
$.placeholder.log("In blur")
$.placeholder.log('"' + this.value + '"')

$el.removeClass(opts.focusClass);

if (this.value == ''){
$.placeholder.log($el.attr('placeholder'))
$el.val($el.attr('placeholder')).addClass(opts.activeClass);
if ($el.is(':password')){
$el.addClass(opts.passwordClass);
$el.get().type = 'text';

if(el.hasClass($.placeholder.settings.activeClass) && el.plVal() == el.attr('placeholder')) {
$.placeholder.log('returning empty because it\'s a placeholder');
return '';
} else {
$.placeholder.log('returning original val');
return el.plVal();
}
}
$.placeholder.log('returning undefined');
return undefined;
};

// Clear placeholder values upon page reload
$(window).bind('beforeunload.placeholder', function() {
var els = $('input.' + $.placeholder.settings.activeClass);
if(els.length > 0)
els.val('').attr('autocomplete','off');
});


// plugin code
$.fn.placeholder = function(opts) {
opts = $.extend({},$.placeholder.settings, opts);

// we don't have to do anything if the browser supports placeholder
if(!opts.overrideSupport && $.support.placeholder)
return this;

return this.each(function() {
var $el = $(this);

// skip if we do not have the placeholder attribute
if(!$el.is('[placeholder]'))
return;

// we cannot do password fields, but supported browsers can
if($el.is(':password'))
return;

// Prevent values from being reapplied on refresh
if(opts.preventRefreshIssues)
$el.attr('autocomplete','off');

$el.bind('focus.placeholder', function(){
var $el = $(this);
if(this.value == $el.attr('placeholder') && $el.hasClass(opts.activeClass))
$el.val('')
.removeClass(opts.activeClass)
.addClass(opts.focusClass);
});
$el.bind('blur.placeholder', function(){
var $el = $(this);

$el.removeClass(opts.focusClass);

if(this.value == '')
$el.val($el.attr('placeholder'))
.addClass(opts.activeClass);
});

$el.triggerHandler('blur');

// Prevent incorrect form values being posted
$el.parents('form').submit(function(){
$el.triggerHandler('focus.placeholder');
});

});
};
});

setTimeout(function(){ $el.triggerHandler('blur'); }, 100)

// Prevent incorrect form values being posted
$el.parents('form').submit(function() {
$el.triggerHandler('focus.placeholder');
});

});
};
})(jQuery);
2 changes: 1 addition & 1 deletion tests/test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Placeholder testing page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="../src/jquery-placeholder-plugin.js" type="text/javascript"></script>
<script src="../src/jquery.placeholder.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#test').placeholder();
Expand Down