Text Box Widget
Textboxes are common user interface to receive user's inputs. Nedil JS textbox widget can be used to create textboxes with various customizations and validations.

Basic Usage
$.domLoaded(function() {
	
	$.get("#tbox1").widget("textbox", CONFIG_JSON );	
	
}
Configuring Options
It contains array of JSON objects. The properties are mentioned below.
NameTypeMust/OptionalDescription
valueStringOptionalSets the default text value of the textbox
watermarkStringOptionalIt is the watermark content behind the textbox. When user types, it will disappear
enabledBooleangOptionalMakes textbox enabled. Default is true
limitNumberOptionalSets a limitation of how many characters are allowed
validationStringOptionalA validation process which forces the user to enter correct values
StringDescription
numericOnly numbers are allowed
decimalOnly numbers or decimal numbers are allowed
alphaOnly alphabets are allowed
alphanumericOnly alphabets and numbers are allowed. Special characters are not allowed
emailOnly email IDs are allowed
custom RegExDevelopers can provide their custom regular expression to validate the input as and when the user types

Methods
NameDescription
disable()Disables the textbox
enable()Enables the textbox
setText( new_text )Sets text value to the textbox. Needs a string input
getText()Returns the value of the textbox.

TextBox Widget Example
JS HTML
			$.domLoaded(function() {
			
				//without watermark
				$.get("#tbox1").widget("textbox");
				
				//with default value
				$.get("#tbox12").widget("textbox", {
					value: "Senthil"
				});					
								
				//with watermark
				$.get("#tbox2").widget("textbox", {
					watermark: "Username"
				});	
				
				//diabled
				$.get("#tbox3").widget("textbox", {
					watermark: "Disabled",
					enabled: false
				});		

				//limit
				$.get("#tbox4").widget("textbox", {
					watermark: "With 10 Chars limit",
					limit: 10
				});						
				
				//validation
				$.get("#tbox5").widget("textbox", {
					watermark: "Only Numbers",
					validation : "numeric"
				});		
				
				$.get("#tbox6").widget("textbox", {
					watermark: "Decimals",
					validation: "decimal"
				});		

				$.get("#tbox7").widget("textbox", {
					watermark: "Only Alphabets",
					validation: "alpha"
				});		

				$.get("#tbox8").widget("textbox", {
					watermark: "Alpha Numeric",
					validation: "alphanumeric"
				});	
				
				$.get("#tbox9").widget("textbox", {
					watermark: "Email",
					validation: "email"
				});	

				$.get("#tbox10").widget("textbox", {
					watermark: "'a'",
					validation: "^a*$"
				});	
				
				var tb = $.get("#tbox11").widget("textbox", {
					watermark: "Username"
				});	
				
				$.get("#toggle").on("click", function() {
					if(tb.enabled) {
						tb.disable();
					} else {
						tb.enable();
					}
				});
				
				$.get("#sText").on("click", function() {
					tb.setText("Welcome");					
				});
				
				$.get("#gText").on("click", function() {
					alert(tb.getText());					
				});				
			});
<body>
	Default Text Box       <input type="text" id="tbox1" />
	
	Default Value      <input type="text" id="tbox12" />
	
	With Watermark       <input type="text" id="tbox2" />	
	
	Disabled TextBox (CHECK CSS)       <input type="text" id="tbox3" />			
	
	Limit 10 Chars       <input type="text" id="tbox4" />	
	
	Only Numeric       <input type="text" id="tbox5" />	
	
	Decimal       <input type="text" id="tbox6" />	
	
	Only Alphabets       <input type="text" id="tbox7" />	
	
	Alpha Numeric       <input type="text" id="tbox8" />	
	
	Email       <input type="text" id="tbox9" />	
	
	User Defined RegX       <input type="text" id="tbox10" />	
	
	External Methods       <input type="text" id="tbox11" />
							<input type="button" id="toggle" value="Enable/Disable"/> 
							<input type="button" id="sText" value="setText 'Welcome'"/>
							<input type="button" id="gText" value="getText"/>	
</body>	
Result