Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Preserve placeholder text on focus #209

Closed
wants to merge 11 commits into from
Closed

Preserve placeholder text on focus #209

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
45df409
Abstract out set and clear events
mlms13 May 23, 2014
bd3cabc
Basic support for clearing on keyup (fixes #92)
mlms13 May 23, 2014
0bded52
Correctly position caret on focus
mlms13 May 23, 2014
386e752
Preserve placeholder when input is emptied
mlms13 May 23, 2014
97f70c2
Update README to reflect focus options
mlms13 May 23, 2014
178c11b
Merge branch 'master' into preserve-on-focus
mlms13 Dec 31, 2014
13a2f3e
Clearing placeholder on focus is not an option
mlms13 Dec 31, 2014
f33bcf5
Remove my duplicate settings definition
mlms13 Jan 10, 2015
b0185f8
Never check for a "placeholder" class
mlms13 Jan 10, 2015
ec00a88
Remove an extra semicolon
mlms13 Jan 22, 2015
3b39969
Switch to bind() to support old jQuery
mlms13 Feb 13, 2015
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
46 changes: 38 additions & 8 deletions jquery.placeholder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@
var propHooks = $.propHooks;
var hooks;
var placeholder;
var events = {
'clear': 'keydown.placeholder',
'set' : 'keyup.placeholder blur.placeholder',
'focus': 'focus.placeholder click.placeholder'
};

if (isInputSupported && isTextareaSupported) {

Expand All @@ -39,12 +44,12 @@
$this
.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
.not('.'+settings.customClass)
.bind({
'focus.placeholder': clearPlaceholder,
'blur.placeholder': setPlaceholder
})
.bind(events.clear, clearPlaceholder)
.bind(events.set, setPlaceholder)
.bind(events.focus, positionCaret)
.data('placeholder-enabled', true)
.trigger('blur.placeholder');
.each(setPlaceholder);

return $this;
};

Expand All @@ -60,7 +65,7 @@
return $passwordInput[0].value;
}

return $element.data('placeholder-enabled') && $element.hasClass('placeholder') ? '' : element.value;
return $element.data('placeholder-enabled') && $element.hasClass(settings.customClass) ? '' : element.value;
},
'set': function(element, value) {
var $element = $(element);
Expand Down Expand Up @@ -155,7 +160,8 @@
var input = this;
var $input = $(input);
var id = this.id;
if (input.value === '') {

if (input.value === '' || (input.value == $input.attr('placeholder') && $input.hasClass(settings.customClass))) {
if (input.type === 'password') {
if (!$input.data('placeholder-textinput')) {
try {
Expand All @@ -169,7 +175,9 @@
'placeholder-password': $input,
'placeholder-id': id
})
.bind('focus.placeholder', clearPlaceholder);
.bind(events.clear, clearPlaceholder)
.bind(events.focus, positionCaret);

$input
.data({
'placeholder-textinput': $replacement,
Expand All @@ -182,11 +190,33 @@
}
$input.addClass(settings.customClass);
$input[0].value = $input.attr('placeholder');

// if the original input had focus, return focus
if ($input.is(':focus')) {
positionCaret.call($input[0]);
}
} else {
$input.removeClass(settings.customClass);
}
}

function positionCaret() {
var input = this,
$input = $(input);

// if input is empty, position caret at the beginning
// otherwise let the browser select all input text
if (input.value == '' || (input.value == $input.attr('placeholder') && $input.hasClass(settings.customClass))) {
if (input.setSelectionRange) {
input.setSelectionRange(0, 0);
} else if (input.createTextRange) {
range = input.createTextRange();
range.move('character', 0);
range.select();
}
}
}

function safeActiveElement() {
// Avoid IE9 `document.activeElement` of death
// https://github.com/mathiasbynens/jquery-placeholder/pull/99
Expand Down