|
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.
Methods
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());
});
});
Result
| |||||||||||||||||||||||||||||||||||||||||||||||||
|
|