0 Replies - 1022 Views - Last Post: 20 August 2011 - 08:06 PM

#1 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 963
  • View blog
  • Posts: 2,382
  • Joined: 15-February 11

Input Element Watermark Effect

Posted 20 August 2011 - 08:06 PM

Description: document.getElementById('name_of_input_element_here').watermark('Your Default Text', '#888888');Creates the effect of a water within an input element.
/**
* @param (string) default_text Text that will be displayed when input element is left empty
* @param (string) faded_color Color that watermark will be displayed in
* @return (void)
*/
HTMLInputElement.prototype.watermark = function(default_text, faded_color){
	var eventHandler = function(e){
		var element = e.target || e.srcElement;
		switch(e.type){
			case 'focus':	
			{
				if(element.value == default_text){
					element.value = '';
					element.style.color = '';
				}
			}
			break;
			case 'blur':
			{
				if(element.value == ''){
					element.value = default_text;
					element.style.color = faded_color;
				}
			}
			default:
			break;
		}
		e.stopPropagation();
	}
	
	this.addEventListener('blur', eventHandler, false);
	this.addEventListener('focus', eventHandler, false);
}


Is This A Good Question/Topic? 0
  • +

Page 1 of 1