15 |
27 |
29 | Form result:
28 |
Form result:
28 |Set/Empty value to the first input programatically using jQuery's .val() function
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 68 | 69 |
70 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Placeholder Enhanced 1.6.9
2 |
3 | ### This jQuery Placeholder plugin is an enhanced polyfill for the HTML5 placeholder attribute.
4 |
5 | ## Features
6 |
7 | - Cross-browser & Cross-styling
8 | - Support for all input types, password, textarea, text, email, search, url, etc...
9 | - Robust: it heavely behave as the HTML5 placeholder defined in the specs
10 | - Normalize placeholder behaviour in modern browsers (optional). This means the placeholder will
11 | hide on input focus.
12 | - Fix jQuery.val() function to work as expected to set/get the value of inputs with placeholder
13 | - Lightweight: **970 bytes** minified & gzipped
14 |
15 | *Requires jQuery 1.4.4 or higher*
16 |
17 | ## Installation
18 |
19 | ```
20 | bower install placeholder-enhanced
21 | ```
22 |
23 | or download this repo
24 |
25 | ## Usage
26 |
27 | Just include the js file after jQuery on your HTML page and the plugin will be automatically initialized
28 |
29 | ```html
30 |
31 |
32 | ```
33 |
34 | If you want to initialize the plugin yourself after the first auto-initialize (for example after ajax content being
35 | loaded), just call the plugin like this:
36 |
37 | ```javascript
38 | $('input[placeholder], textarea[placeholder]').placeholderEnhanced();
39 | ```
40 |
41 | ### Example:
42 |
43 | Initialize the plugin after loading an HTML page via AJAX, call the plugin after the content is loaded.
44 |
45 | ```javascript
46 | $(function () {
47 | $.get('file.html', function (html) {
48 | $('#container')
49 | // append the html
50 | .append(html)
51 | // find any inputs or textareas with placeholder and initialize the plugin
52 | .find('input[placeholder], textarea[placeholder]').placeholderEnhanced();
53 | });
54 | })
55 | ```
56 |
57 | ### Destroy
58 |
59 | If you want to destroy the plugin call:
60 |
61 | ```javascript
62 | $('input[placeholder], textarea[placeholder]').placeholderEnhanced('destroy');
63 | ```
64 |
65 | It will automatically clean all what the plugin first created as if it was never initialized, only for the selected elements.
66 |
67 | ## CSS
68 |
69 | Customize the style of the placeholder with CSS in a cross-browser manner:
70 |
71 | See [placeholder-enhanced.css](https://github.com/dciccale/placeholder-enhanced/blob/master/css/placeholder-enhanced.css)
72 |
73 | ## Demo
74 |
75 | For a demo see [demo.html](https://github.com/dciccale/placeholder-enhanced/blob/master/demo.html) **[online](http://dciccale.github.com/placeholder-enhanced/)**
76 |
77 | ## Build
78 |
79 | If you want to work on the plugin there is a Makefile with two targets:
80 |
81 | To lint with jshint
82 |
83 | ```sh
84 | $ make lint
85 | ```
86 |
87 | Minify the js file
88 |
89 | ```sh
90 | $ make build
91 | ```
92 |
93 | ## TODO
94 |
95 | These are not major tasks, but nice to have:
96 |
97 | - Create a [kimbo.js](http://kimbojs.com) plugin version.
98 | - Create a plain JavaScript version?
99 | - Create two separate versions.
100 | - Version 1.x to give *full* cross-browser support and normalization. (current version)
101 | - Version 2.x only to normalize *modern browsers* placeholder behaviour.
102 |
103 | ## License
104 |
105 | See [LICENSE.txt](https://raw.github.com/dciccale/placeholder-enhanced/master/LICENSE.txt)
106 |
--------------------------------------------------------------------------------
/js/jquery.placeholder-enhanced.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * jQuery Placeholder Enhanced 1.6.9
3 | * Copyright (c) 2013-2015 Denis Ciccale (@tdecs)
4 | * Released under MIT license
5 | * https://raw.github.com/dciccale/placeholder-enhanced/master/LICENSE.txt
6 | */
7 |
8 | /* jshint jquery: true */
9 | (function ($, doc) {
10 | 'use strict';
11 |
12 | var PLUGIN_NAME = 'placeholderEnhanced';
13 |
14 | var input = doc.createElement('input');
15 | var textarea = doc.createElement('textarea');
16 |
17 | // Check for support
18 | var HAS_NATIVE_SUPPORT = 'placeholder' in input && 'placeholder' in textarea;
19 |
20 | // Event namespaces
21 | var EVENT = {
22 | FOCUS: 'focus.placeholder',
23 | BLUR: 'blur.placeholder'
24 | };
25 |
26 | /*
27 | * Define defaults here as some options are needed before initialization
28 | * it also merges with an options object when you call the plugin
29 | */
30 | var DEFAULTS = {
31 | cssClass: 'placeholder',
32 |
33 | /*
34 | * Normalize behaviour & style across browsers
35 | * (remove placeholder on focus, show on blur)
36 | * if false, each browser wil handle behaviour & style natively
37 | * i.e. in case of Chrome placeholder is still visible on focus
38 | */
39 | normalize: true
40 | };
41 |
42 | // Save original jQuery .val() function
43 | var $val = $.fn.val;
44 |
45 | // Checks if the node is valid to use with the fixed jQuery .val() function
46 | var isValidNode = function (el) {
47 | return ($.nodeName(el, 'input') || $.nodeName(el, 'textarea'));
48 | };
49 |
50 | // Copy attributes from a DOM node to a plain object to use later
51 | var copyAttrs = function (el) {
52 | var exclude = ['placeholder', 'name', 'id'];
53 | var attrs = {};
54 | var attr;
55 |
56 | for (var i = 0, l = el.attributes.length; i < l; i++) {
57 | attr = el.attributes[i];
58 | if (attr.specified && $.inArray(attr.name, exclude) < 0) {
59 | attrs[attr.name] = attr.value;
60 | }
61 | }
62 |
63 | return attrs;
64 | };
65 |
66 | // Shows specified password input
67 | var showInput = function ($input) {
68 | $input.css({position: '', left: ''});
69 | };
70 |
71 | // Hides specified password input
72 | var hideInput = function ($input) {
73 | $input.css({position: 'absolute', left: '-9999em'});
74 | };
75 |
76 | // Don't do anything if there is native placeholder support and normalize mode is off by default
77 | if (HAS_NATIVE_SUPPORT && !DEFAULTS.normalize) {
78 | return;
79 | }
80 |
81 | /*
82 | * Handle the use of jQuery .val(), if placeholder is not supported, the .val() function
83 | * returns the placeholder value, wrap the val function to fix this, also useful when
84 | * using .serialize() or any other jQuery method that uses .val()
85 | */
86 |
87 | // Fix .val() function for unsupported browsers
88 | if (!HAS_NATIVE_SUPPORT) {
89 | $.fn.val = function () {
90 | var args = arguments;
91 | var el = this[0];
92 | var placeholderTxt;
93 |
94 | if (!el) {
95 | return;
96 | }
97 |
98 | // Handle .val()
99 | if (!args.length) {
100 | placeholderTxt = $(el).attr('placeholder');
101 |
102 | // Handle get if the node has a placeholder
103 | if (placeholderTxt && isValidNode(el)) {
104 | return (el.value === placeholderTxt ? '' : el.value);
105 |
106 | // No placeholder, call native
107 | } else {
108 | return $val.apply(this, args);
109 | }
110 | }
111 |
112 | // Handle .val(...)
113 | return this.each(function (i, el) {
114 | var $el = $(el);
115 | var settings = $.data(el, PLUGIN_NAME);
116 | var placeholderTxt = $el.attr('placeholder');
117 |
118 | if (settings && placeholderTxt && isValidNode(el)) {
119 |
120 | // Handle .val(''), .val(null), .val(undefined)
121 | if (!args[0] && el.value !== placeholderTxt) {
122 | el.value = $el.addClass(settings.cssClass).attr('placeholder');
123 |
124 | // Handle .val('value')
125 | } else if (args[0]) {
126 | if ($el.hasClass(settings.cssClass)) {
127 | $el.removeClass(settings.cssClass);
128 | }
129 | $val.apply($el, args);
130 | }
131 |
132 | } else {
133 | $val.apply($el, args);
134 | }
135 | });
136 | };
137 |
138 | // Fix .val() function for modern browsers when normalize mode is on
139 | } else if (HAS_NATIVE_SUPPORT && DEFAULTS.normalize) {
140 | $.fn.val = function () {
141 | var args = arguments;
142 | var el = this[0];
143 |
144 | if (!el) {
145 | return;
146 | }
147 |
148 | // Handle .val()
149 | if (!args.length) {
150 | return $val.apply(this, args);
151 | }
152 |
153 | // Handle .val(...)
154 | return this.each(function (i, el) {
155 | var $el = $(el);
156 | var settings = $.data(el, PLUGIN_NAME);
157 | var placeholderTxt = el._placeholder;
158 |
159 | if (settings && placeholderTxt && isValidNode(el)) {
160 |
161 | // Handle .val(''), .val(null), .val(undefined)
162 | if (!args[0] && el.value !== placeholderTxt) {
163 |
164 | // Restore the placeholder
165 | $el.addClass(settings.cssClass).attr('placeholder', placeholderTxt);
166 |
167 | // Handle .val('value')
168 | } else if (args[0]) {
169 | if ($el.hasClass(settings.cssClass)) {
170 | $el.removeClass(settings.cssClass);
171 | }
172 | }
173 | }
174 |
175 | $val.apply($el, args);
176 | });
177 | };
178 | }
179 |
180 | // Placeholder Enhanced plugin
181 | $.fn[PLUGIN_NAME] = function (options) {
182 |
183 | // Merge passed options with defaults
184 | var settings = $.extend(DEFAULTS, options);
185 |
186 | // Don't do anything if empty set or if placeholder is supported but
187 | // don't want to normalize modern browsers
188 | if (!this.length || (HAS_NATIVE_SUPPORT && !settings.normalize)) {
189 | return;
190 | }
191 |
192 | // Check if options param is destroy method
193 | if (options === 'destroy') {
194 |
195 | // Completely destroy the plugin
196 | return this
197 |
198 | // Get the elements where the plugin was initialized
199 | .filter(function (i, el) {
200 | return $.data(el, PLUGIN_NAME);
201 | })
202 |
203 | // Remove class
204 | .removeClass(settings.cssClass)
205 |
206 | // Clean other stuff
207 | .each(function (i, el) {
208 | var $el = $(el).unbind('.placeholder');
209 | var isPassword = (el.type === 'password');
210 | var placeholderTxt = $el.attr('placeholder');
211 |
212 | // Do all this only for unsupported browsers
213 | if (!HAS_NATIVE_SUPPORT) {
214 | if (el.value === placeholderTxt) {
215 | el.value = '';
216 | }
217 |
218 | // Remove fake password input
219 | if (isPassword) {
220 | showInput($el);
221 | $el.prev().unbind('.placeholder').remove();
222 | }
223 |
224 | // Delete backup prop
225 | } else {
226 | delete el._placeholder;
227 | }
228 |
229 | // Restore original jQuery .val() function
230 | $.fn.val = $val;
231 |
232 | // Plugin off
233 | $.removeData(el, PLUGIN_NAME);
234 | });
235 | }
236 |
237 | return this.each(function (i, el) {
238 |
239 | // Check if the plugin was already initialized for this element
240 | if ($.data(el, PLUGIN_NAME)) {
241 | return;
242 | }
243 |
244 | // Mark plugin as initialized for the current element at the begining to
245 | // prevent multiple calls of the plugin for the same set of elements
246 | $.data(el, PLUGIN_NAME, settings);
247 |
248 | // jQuery object
249 | var $el = $(el);
250 |
251 | // Passwords have different treatment
252 | var isPassword = (el.type === 'password');
253 |
254 | // Current placeholder text
255 | var placeholderTxt = $el.attr('placeholder');
256 |
257 | // A fake input will be created for passwords
258 | var fakePassw = null;
259 |
260 | var setPlaceholder = null;
261 | var removePlaceholder = null;
262 |
263 | // Placeholder support for unsupported browsers
264 | if (!HAS_NATIVE_SUPPORT) {
265 |
266 | setPlaceholder = function () {
267 |
268 | // If there is no initial value or initial value is equal to the
269 | // placeholder (done in the $.fn.val wrapper) show the placeholder
270 | if (!$el.val()) {
271 | if (isPassword) {
272 | showInput(fakePassw);
273 | hideInput($el);
274 | } else {
275 | $el.val(placeholderTxt).addClass(settings.cssClass);
276 | }
277 | } else if ($el.val() && isPassword) {
278 |
279 | // If there is a value already, we want to remove the fake
280 | // placeholder. Otherwise, we'll have both the fake placeholder
281 | // and the actual input visible
282 | removePlaceholder();
283 | }
284 | };
285 |
286 | // Remove function for inputs and textareas
287 | if (!isPassword) {
288 |
289 | removePlaceholder = function () {
290 | if ($el.hasClass(settings.cssClass)) {
291 | el.value = '';
292 | $el.removeClass(settings.cssClass);
293 | }
294 | };
295 |
296 | // And for password inputs
297 | } else {
298 |
299 | removePlaceholder = function () {
300 | showInput($el);
301 | hideInput(fakePassw);
302 | };
303 |
304 | // Create a fake password input
305 | fakePassw = $('', $.extend(copyAttrs(el), {
306 | 'type': 'text',
307 | value: placeholderTxt,
308 | tabindex: -1 // Skip tabbing
309 | }))
310 | .addClass(settings.cssClass)
311 |
312 | // When focus, trigger real input focus
313 | .bind(EVENT.FOCUS, function () {
314 | $el.trigger(EVENT.FOCUS);
315 | })
316 |
317 | // Insert the fake input
318 | .insertBefore($el);
319 | }
320 |
321 | // Normalize placeholder behaviour and style in modern browsers if normalize mode is on
322 | } else if (HAS_NATIVE_SUPPORT && settings.normalize) {
323 |
324 | // Save the placeholder to restore it when needed
325 | el._placeholder = $el.attr('placeholder');
326 |
327 | setPlaceholder = function () {
328 | if (!el.value) {
329 | $el.addClass(settings.cssClass).attr('placeholder', placeholderTxt);
330 | }
331 | };
332 |
333 | removePlaceholder = function () {
334 | $el.removeAttr('placeholder').removeClass(settings.cssClass);
335 | };
336 |
337 | }
338 |
339 | // Bind events and trigger blur the first time
340 | $el
341 | .bind(EVENT.BLUR, setPlaceholder)
342 | .bind(EVENT.FOCUS, removePlaceholder)
343 | .trigger(EVENT.BLUR);
344 | });
345 | };
346 |
347 | // Auto-initialize the plugin
348 | $(function () {
349 | $('input[placeholder], textarea[placeholder]')[PLUGIN_NAME]();
350 | });
351 |
352 | }(jQuery, document));
353 |
--------------------------------------------------------------------------------