Morris Jobke
11 years ago
3 changed files with 0 additions and 218 deletions
@ -1,216 +0,0 @@ |
|||
/* |
|||
jQuery placeholder plugin |
|||
by Andrey Kuzmin, @unsoundscapes |
|||
|
|||
Based on existing plugin http://mths.be/placeholder by @mathias
|
|||
and this demo http://robertnyman.com/2011/05/02/ by @robertnyman
|
|||
|
|||
Adopted to toggle placeholder on user input instead of focus |
|||
|
|||
Released under the MIT license |
|||
*/ |
|||
|
|||
(function (factory) { |
|||
'use strict'; |
|||
|
|||
if (typeof define === 'function' && define.amd) { |
|||
// AMD. Register as anonymous module.
|
|||
define(['jquery'], factory) |
|||
} else { |
|||
// Browser globals.
|
|||
factory(jQuery) |
|||
} |
|||
}(function ($) { |
|||
'use strict'; |
|||
|
|||
var isInputSupported = 'placeholder' in document.createElement('input') |
|||
, isTextareaSupported = 'placeholder' in document.createElement('textarea') |
|||
, $placeholders = $() |
|||
|
|||
function getAttributes (element) { |
|||
// Return an object of element attributes
|
|||
var newAttrs = {} |
|||
, rinlinejQuery = /^jQuery\d+$/ |
|||
|
|||
$.each(element.attributes, function () { |
|||
if (this.specified && !rinlinejQuery.test(this.name)) { |
|||
newAttrs[this.name] = this.value |
|||
} |
|||
}) |
|||
return newAttrs |
|||
} |
|||
|
|||
function setCaretTo (element, index) { |
|||
// Set caret to specified @index
|
|||
if (element.createTextRange) { |
|||
var range = element.createTextRange() |
|||
range.move('character', index) |
|||
range.select() |
|||
} else if (element.selectionStart !== null) { |
|||
element.focus() |
|||
element.setSelectionRange(index, index) |
|||
} |
|||
} |
|||
|
|||
|
|||
function Placeholder (element, options) { |
|||
this.options = options || {} |
|||
this.$replacement = this.$element = $(element) |
|||
this.initialize.apply(this, arguments) |
|||
// Cache all elements with placeholders
|
|||
$placeholders = $placeholders.add(element) |
|||
} |
|||
|
|||
Placeholder.prototype = { |
|||
|
|||
initialize: function () { |
|||
this.isHidden = true |
|||
this.placeholderAttr = this.$element.attr('placeholder') |
|||
// do not mess with default behavior
|
|||
this.$element.removeAttr('placeholder') |
|||
this.isPassword = this.$element.is('[type=password]') |
|||
if (this.isPassword) this.makeReplacement() |
|||
this.$replacement.on({ |
|||
'keydown.placeholder': $.proxy(this.hide, this) |
|||
, 'focus.placeholder drop.placeholder click.placeholder': $.proxy(this.setCaret, this) |
|||
}) |
|||
this.$element.on({ |
|||
'blur.placeholder keyup.placeholder': $.proxy(this.show, this) |
|||
}) |
|||
this.show() |
|||
} |
|||
|
|||
// Set or get input value
|
|||
// Setting value toggles placeholder
|
|||
, val: function (value) { |
|||
if (value === undefined) { |
|||
return this.isHidden ? this.$element[0].value : ''; |
|||
} |
|||
if (value === '') { |
|||
if (this.isHidden) { |
|||
this.$element[0].value = value |
|||
this.show() |
|||
} |
|||
} else { |
|||
if (!this.isHidden) this.hide() |
|||
this.$element[0].value = value |
|||
} |
|||
return this |
|||
} |
|||
|
|||
// Hide placeholder at user input
|
|||
, hide: function (e) { |
|||
var isActiveElement = this.$replacement.is(':focus') |
|||
if (this.isHidden) return; |
|||
if (!e || !(e.shiftKey && e.keyCode === 16) && e.keyCode !== 9) { |
|||
this.isHidden = true |
|||
if (this.isPassword) { |
|||
this.$replacement.before(this.$element.show()).hide() |
|||
if (isActiveElement) this.$element.focus() |
|||
} else { |
|||
this.$element[0].value = '' |
|||
this.$element.removeClass(this.options.className) |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Show placeholder on blur and keyup
|
|||
, show: function (e) { |
|||
var isActiveElement = this.$element.is(':focus') |
|||
if (!this.isHidden) return; |
|||
if (this.$element[0].value === '') { |
|||
this.isHidden = false |
|||
if (this.isPassword) { |
|||
this.$element.before(this.$replacement.show()).hide() |
|||
if (isActiveElement) this.$replacement.focus() |
|||
} else { |
|||
this.$element[0].value = this.placeholderAttr |
|||
this.$element.addClass(this.options.className) |
|||
if (isActiveElement) this.setCaret(e) |
|||
} |
|||
} |
|||
} |
|||
|
|||
// Set caret at the beginning of the input
|
|||
, setCaret: function (e) { |
|||
if (e && !this.isHidden) { |
|||
setCaretTo(this.$replacement[0], 0) |
|||
e.preventDefault() |
|||
} |
|||
} |
|||
|
|||
// Make and return replacement element
|
|||
, makeReplacement: function () { |
|||
// we can't use $.fn.clone because ie <= 8 doesn't allow type change
|
|||
var replacementAttributes = |
|||
$.extend( |
|||
getAttributes(this.$element[0]) |
|||
, { 'type': 'text' |
|||
, 'value': this.placeholderAttr |
|||
} |
|||
) |
|||
|
|||
// replacement should not have input name
|
|||
delete replacementAttributes.name |
|||
|
|||
this.$replacement = $('<input>', replacementAttributes) |
|||
.data('placeholder', this) |
|||
.addClass(this.options.className) |
|||
|
|||
return this.$replacement; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
// Override jQuery val and prop hooks
|
|||
$.valHooks.input = $.valHooks.textarea = $.propHooks.value = { |
|||
get: function (element) { |
|||
var placeholder = $(element).data('placeholder') |
|||
return placeholder ? placeholder.val() : element.value; |
|||
} |
|||
, set: function (element, value) { |
|||
var placeholder = $(element).data('placeholder') |
|||
return placeholder ? placeholder.val(value) : element.value = value; |
|||
} |
|||
} |
|||
|
|||
|
|||
// Plugin definition
|
|||
$.fn.placeholder = function (option) { |
|||
return this.each(function () { |
|||
var $this = $(this) |
|||
, data = $this.data('placeholder') |
|||
, options = $.extend({}, $.fn.placeholder.defaults, typeof option === 'object' && option) |
|||
|
|||
if (!data && $this.is('[placeholder]') && (options.force || |
|||
!isInputSupported && $this.is('input') || |
|||
!isTextareaSupported && $this.is('textarea'))) { |
|||
$this.data('placeholder', data = new Placeholder(this, options)) |
|||
} |
|||
|
|||
if (data && typeof option === 'string') data[option]() |
|||
}) |
|||
} |
|||
$.fn.placeholder.defaults = { |
|||
force: false |
|||
, className: 'placeholder' |
|||
} |
|||
$.fn.placeholder.Constructor = Placeholder |
|||
|
|||
|
|||
// Events
|
|||
$(document).on('submit.placeholder', 'form', function () { |
|||
// Clear the placeholder values so they don't get submitted
|
|||
$placeholders.placeholder('hide') |
|||
// And then restore them back
|
|||
setTimeout(function () { $placeholders.placeholder('show') }, 10) |
|||
}) |
|||
$(window).on('beforeunload.placeholder', function () { |
|||
// Clear placeholders upon page reload
|
|||
$placeholders.placeholder('hide') |
|||
}) |
|||
|
|||
return Placeholder |
|||
|
|||
})); |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue