Return to Snippet

Revision: 36194
at May 8, 2012 06:17 by typomatic


Updated Code
/* Usage:
 *
 *	HTML: <input class="default-value-replace" data-placeholder="Search" type="text" name="some_name">
 *	JS: $('#form').inputLabeler();
 */

(function($) {

	$.inputLabeler = function(element, options) {

		var defaults = {
			inputClass: 'default-value-replace',
			dataTag: 'placeholder'
		};

		var plugin = this;

		plugin.settings = {};

		var $element = $(element),
		element = element;

		plugin.init = function() {

			plugin.settings = $.extend({}, defaults, options);

			var _theInputs = [],
			_theSubmitButton = $element.find('input[type="submit"]');

			(function(){										
				$element.find('input.' + plugin.settings.inputClass ).each(
					function(){

						var _input = $(this),
						defaultValue = _input.data( plugin.settings.dataTag );

						if ( defaultValue != '') {
							_input
							.val( defaultValue )
							.on( 'focusin focusout', function() {
								if ( $.trim( _input.val() ) == '' ) {
									_input.val( defaultValue );
								} else if ( $.trim( _input.val() ) == defaultValue ) {
									_input.val('');
								};
							});
							_theInputs.push( _input );
						};
					});
			})();

			_theSubmitButton
			.click(function(){

				defaultValueSubmitted = false;

				$.each( _theInputs, function(){

					var _input = $(this),
					defaultValue = _input.data( plugin.settings.dataTag );

					if ( $.trim( _input.val() ) == defaultValue ) {
						defaultValueSubmitted = true;
					}
				});

				if ( ! defaultValueSubmitted ) {
					plugin.submit();
				} else {
					return false;
				};

			});
		};

		plugin.init();

	};

	$.fn.inputLabeler = function( options ) {
		return this.each(
			function() {
				var _this = $(this);
				if ( undefined == _this.data( 'inputLabeler' )) {
					var plugin = new $.inputLabeler( this, options );
					_this.data( 'inputLabeler', plugin );
				}
			});
	};

})(window.jQuery);

Revision: 36193
at May 8, 2012 06:13 by typomatic


Updated Code
(function($) {

    $.inputLabeler = function(element, options) {

        var defaults = {
			inputClass: 'default-value-replace',
            dataTag: 'placeholder'
        };

        var plugin = this;

        plugin.settings = {};

        var $element = $(element),
             element = element;

        plugin.init = function() {
	
            plugin.settings = $.extend({}, defaults, options);
			
			var _theInputs = [],
				_theSubmitButton = $element.find('input[type="submit"]');

			(function(){										
				$element.find('input.' + plugin.settings.inputClass ).each(
					function(){
						
						var _input = $(this),
							defaultValue = _input.data( plugin.settings.dataTag );
																										
						if ( defaultValue != '') {
							_input
								.val( defaultValue )
								.on( 'focusin focusout', function() {
									if ( $.trim( _input.val() ) == '' ) {
										_input.val( defaultValue );
									} else if ( $.trim( _input.val() ) == defaultValue ) {
										_input.val('');
									};
								});
							_theInputs.push( _input );
						};
					});
				})();
																	
			_theSubmitButton
				.click(function(){
					
					defaultValueSubmitted = false;
													
					$.each( _theInputs, function(){
			
							var _input = $(this),
								defaultValue = _input.data( plugin.settings.dataTag );
			
							if ( $.trim( _input.val() ) == defaultValue ) {
								defaultValueSubmitted = true;
							}
						});
			
					if ( ! defaultValueSubmitted ) {
						plugin.submit();
					} else {
						return false;
					};
			
				});
        };

        plugin.init();

    };

    $.fn.inputLabeler = function( options ) {
        return this.each(
			function() {
				var _this = $(this);
	            if ( undefined == _this.data( 'inputLabeler' )) {
	                var plugin = new $.inputLabeler( this, options );
	                _this.data( 'inputLabeler', plugin );
	            }
	        });
    };

})(window.jQuery);

/* Usage:
 *
 *	HTML: <input class="default-value-replace" data-placeholder="Search" type="text" name="some_name">
 *	JS: $('#form').inputLabeler();
*/

Revision: 36192
at May 8, 2012 06:11 by typomatic


Updated Code
(function($) {

			    $.inputLabeler = function(element, options) {

			        var defaults = {
						inputClass: 'default-value-replace',
			            dataTag: 'placeholder'
			        };

			        var plugin = this;

			        plugin.settings = {};

			        var $element = $(element),
			             element = element;

			        plugin.init = function() {
				
			            plugin.settings = $.extend({}, defaults, options);
						
						var _theInputs = [],
							_theSubmitButton = $element.find('input[type="submit"]');
			
						(function(){										
							$element.find('input.' + plugin.settings.inputClass ).each(
								function(){
									
									var _input = $(this),
										defaultValue = _input.data( plugin.settings.dataTag );
																													
									if ( defaultValue != '') {
										_input
											.val( defaultValue )
											.on( 'focusin focusout', function() {
												if ( $.trim( _input.val() ) == '' ) {
													_input.val( defaultValue );
												} else if ( $.trim( _input.val() ) == defaultValue ) {
													_input.val('');
												};
											});
										_theInputs.push( _input );
									};
								});
							})();
																				
						_theSubmitButton
							.click(function(){
								
								defaultValueSubmitted = false;
																
								$.each( _theInputs, function(){
						
										var _input = $(this),
											defaultValue = _input.data( plugin.settings.dataTag );
						
										if ( $.trim( _input.val() ) == defaultValue ) {
											defaultValueSubmitted = true;
										}
									});
						
								if ( ! defaultValueSubmitted ) {
									plugin.submit();
								} else {
									return false;
								};
						
							});
			        };

			        plugin.init();

			    };

			    $.fn.inputLabeler = function( options ) {
			        return this.each(
						function() {
							var _this = $(this);
				            if ( undefined == _this.data( 'inputLabeler' )) {
				                var plugin = new $.inputLabeler( this, options );
				                _this.data( 'inputLabeler', plugin );
				            }
				        });
			    };

			})(window.jQuery);
			
			/* Usage:
			 *
			 *	HTML: <input class="default-value-replace" data-placeholder="Search" type="text" name="some_name">
			 *	JS: $('#form').inputLabeler();
			*/

Revision: 36191
at December 7, 2010 03:45 by typomatic


Updated Code
var theForm = $('element'),
	theInputs = $('element inputs'),
	theSubmitButton = $('element button');
		
theInputs
	.each(function(){
		$(this)
			.data('defaultValue', $.trim($(this).val()))
			.val($(this).data('defaultValue'))
			.bind('focusin focusout', function() {
				if ($.trim($(this).val()) == '') {
					$(this).val($(this).data('defaultValue'));
				} else if ($.trim($(this).val()) == $(this).data('defaultValue')) {
					$(this).val('');
				}
			});
	});
	
theSubmitButton
	.click(function(){
		
		defaultValueSubmitted = false;
		
		theInputs
			.each(function(){
				if ($.trim($(this).val()) == $(this).data('defaultValue')) {
					defaultValueSubmitted = true;
				}
			});
		
		if (!defaultValueSubmitted) {
			theForm.submit();
		} else {
			return false;
		}
			
	});

Revision: 36190
at November 19, 2010 05:54 by typomatic


Initial Code
var searchForm = $('search-form'),
	searchInput = $('search-input'),
	searchButton = $('search-button'),
	searchText = $.trim(searchInput.val()) != '' ? $.trim(searchInput.val()) : 'Search';
		
searchInput
	.val(searchText)
	.bind('focusin focusout', function() {
		if ($.trim(searchInput.val()) == '') {
			searchInput.val(searchText);
		} else if ($.trim(searchInput.val()) == searchText) {
			searchInput.val('');
		}
	});
	
searchButton
	.click(function(){			
		if ($.trim(searchInput.val()) != searchText) {
			searchForm.submit();
		} else {
			return false;
		}
	});

Initial URL


Initial Description
A simple plugin to set an "inner" label on text inputs.

Initial Title
Default Field Value Text Replace

Initial Tags
jquery

Initial Language
JavaScript