ejTextBoxes
11 Jul 201824 minutes to read
NumericTextBox is used to display only numeric values. It has Spin buttons to increase or decrease the values in the Text Box.
CurrencyTextBox is used to display only currency values. It has Spin buttons to increase or decrease the values in the Text Box.
PercentageTextBox is used to display only percentage values. It has Spin buttons to increase or decrease the values in the Text Box.
Syntax
$(element).ejNumericTextbox()
$(element).ejCurrencyTextbox()
$(element).ejPercentageTextbox()Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
// Create Textbox Editors
$('#numeric').ejNumericTextbox({value:10});
$('#currency').ejCurrencyTextbox({value:1000});
$('#percentage').ejPercentageTextbox({value:100});
</script>Requires
-
module:jQuery
-
module:ej.core.js
-
module:ej.globalize.js
-
module:ej.editor.js
Members
currencySymbol string
Specifies the currency symbol of currency textbox, used when the user wants to overwrite the currency symbol commonly instead of the current culture symbol.
Default Value
- Based on the culture
Example
<input id="currency" type="text" />
<script>
//To set currencySymbol API value during initialization
$("#currency").ejCurrencyTextbox({ positivePattern: "$ n", value:100, currencySymbol: "€" });
</script>cssClass string
Sets the root CSS class for Editors which allow us to customize the appearance.
Default Value
- ””
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set cssClass API value during initialization
$("#numeric").ejNumericTextbox({ cssClass: "gradient-lime" , value:5 });
$("#currency").ejCurrencyTextbox({ cssClass: "gradient-lime", value:100 });
$("#percentage").ejPercentageTextbox({ cssClass: "gradient-lime", value:505 });
</script>decimalPlaces number
Specifies the number of digits that is allowed after the decimal point. When the decimalPlaces is set to “-1”, it allows the decimals without any limit in the Textboxes.
Default Value
- 0
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set decimalPlaces API value during initialization
$("#numeric").ejNumericTextbox({ decimalPlaces: 2, value:5 });
$("#currency").ejCurrencyTextbox({ decimalPlaces: 2 , value:5 });
$("#percentage").ejPercentageTextbox({ decimalPlaces: 2, value:5 });
</script>enabled boolean
Specifies the editor control state.
Default Value
- true
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set enabled API value during initialization
$("#numeric").ejNumericTextbox({ enabled: false, value:1200 });
$("#currency").ejCurrencyTextbox({ enabled: false , value:50 });
$("#percentage").ejPercentageTextbox({ enabled: false, value:100 });
</script>enablePersistence boolean
Specify the enablePersistence to editor to save current editor control value to browser cookies for state maintenance.
Default Value
- false
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set enablePersistence API value during initialization
$("#numeric").ejNumericTextbox({ enablePersistence: true, value:5 });
$("#currency").ejCurrencyTextbox({ enablePersistence: true, value:5 });
$("#percentage").ejPercentageTextbox({ enablePersistence: true, value:5 });
</script>enableRTL boolean
Specifies the Right to Left Direction to editor.
Default Value
- false
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set enableRTL API value during initialization
$("#numeric").ejNumericTextbox({ enableRTL: true, value:5 });
$("#currency").ejCurrencyTextbox({ enableRTL: true , value:45 });
$("#percentage").ejPercentageTextbox({ enableRTL: true, value:567 });
</script>enableStrictMode boolean
When enableStrictMode true it allows the value outside of the range also but it highlights the textbox with error class,otherwise it internally changed to the correct value.
Default Value
- false
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set enableStrictMode API value during initialization
$("#numeric").ejNumericTextbox({ enableStrictMode: true, value:5 });
$("#currency").ejCurrencyTextbox({ enableStrictMode: true, value:55 });
$("#percentage").ejPercentageTextbox({ enableStrictMode: true, value:555 });
</script>groupSize string
Specifies the number of digits in each group to the editor.
Default Value
- Based on the culture.
#Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set groupSize API value during initialization
$("#numeric").ejNumericTextbox({ groupSize:"2" , value:500 });
$("#currency").ejCurrencyTextbox({ groupSize:"2", value:100 });
$("#percentage").ejPercentageTextbox({ groupSize:"2", value:505 });
</script>groupSeparator string
It provides the options to get the customized character to separate the digits. If not set, the separator defined by the current culture.
Default Value
- Based on the culture
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set groupSeparator API value during initialization
$("#numeric").ejNumericTextbox({ groupSeparator: "-", value:5 });
$("#currency").ejCurrencyTextbox({ groupSeparator: "-", value:55 });
$("#percentage").ejPercentageTextbox({ groupSeparator: "-", value:555 });
</script>height string
Specifies the height of the editor.
Default Value
- 30
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set height API value during initialization
$("#numeric").ejNumericTextbox({ height: "30px", value:5 });
$("#currency").ejCurrencyTextbox({ height: "30px", value:55 });
$("#percentage").ejPercentageTextbox({ height: "30px", value:555 });
</script>htmlAttributes object
It allows to define the characteristics of the Editors control. It will helps to extend the capability of an HTML element.
Default Value
- {}
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To Set HtmlAttributes API value during initialization
$("#numeric").ejNumericTextbox({ htmlAttributes : {disabled:"disabled"} });
$("#currency").ejCurrencyTextbox({ htmlAttributes : {disabled:"disabled"}});
$("#percentage").ejPercentageTextbox({ htmlAttributes : {disabled:"disabled"}});
</script>incrementStep number
The Editor value increment or decrement based an incrementStep value.
Default Value
- 1
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set incrementStep API value during initialization
$("#numeric").ejNumericTextbox({ incrementStep: 2, value:5 });
$("#currency").ejCurrencyTextbox({ incrementStep: 2 , value:55 });
$("#percentage").ejPercentageTextbox({ incrementStep: 2, value:50 });
</script>locale string
Defines the localization culture for editor.
Default Value
- en-US
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set locale API value during initialization
$("#numeric").ejNumericTextbox({ locale: "de-DE", value:5 });
$("#currency").ejCurrencyTextbox({ locale: "de-DE", value:5000 });
$("#percentage").ejPercentageTextbox({ locale: "de-DE", value:455 });
</script>maxValue number
Specifies the maximum value of the editor.
Default Value
- Number.MAX_VALUE
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set maxValue API value during initialization
$("#numeric").ejNumericTextbox({ maxValue: 100, value:500 });
$("#currency").ejCurrencyTextbox({ maxValue: 100, value:550 });
$("#percentage").ejPercentageTextbox({ maxValue: 100, value:50 });
</script>minValue number
Specifies the minimum value of the editor.
Default Value
- -(Number.MAX_VALUE) and 0 for Currency Textbox.
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set minValue API value during initialization
$("#numeric").ejNumericTextbox({ minValue: 50, value:55 });
$("#currency").ejCurrencyTextbox({ minValue: 50, value:5 });
$("#percentage").ejPercentageTextbox({ minValue: 50, value:555 });
</script>name string
Specifies the name of the editor.
Default Value
- Sets id as name if it is null.
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set name API value during initialization
$("#numeric").ejNumericTextbox({ name: "numeric", value:5 });
$("#currency").ejCurrencyTextbox({ name: "currency", value:55 });
$("#percentage").ejPercentageTextbox({ name: "percentage", value:500 });
</script>negativePattern string
Specifies the pattern for formatting positive values in editor.We have maintained some standard to define the negative pattern. you have to specify ‘n’ to place the digit in your pattern.ejTextbox allows you to define a currency or percent symbol where you want to place it.
####Default value
- Based on the culture
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set negativePattern API value during initialization
$("#numeric").ejNumericTextbox({ negativePattern:"( n)", value:-5 }); //output: ( 5)
$("#percentage").ejPercentageTextbox({ negativePattern:"-% n", value:-100 }); //output: -% 100
$("#currency").ejCurrencyTextbox({ negativePattern:"-n $", value:-505 , minValue:-600 }); //output: -505 $
</script>positivePattern string
Specifies the pattern for formatting positive values in editor.We have maintained some standard to define the positive pattern. you have to specify ‘n’ to place the digit in your pattern.ejTextbox allows you to define a currency or percent symbol where you want to place it.
NOTE
Numeric Textbox support positivePattern for all the cultures. The default Value of positivePattern is “n”.
####Default value
- Based on the culture
Example
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set positivePattern API value during initialization
$("#numeric").ejNumericTextbox({ positivePattern:"n kg", value:100 }); //100 kg
$("#percentage").ejPercentageTextbox({ positivePattern:"% n", value:100 }); //% 100
$("#currency").ejCurrencyTextbox({ positivePattern:"n $", value:505 }); //505 $
</script>readOnly boolean
Toggles the readonly state of the editor. When the Editor is readonly it doesn’t allow user interactions.
Default Value
- false
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set readOnly API value during initialization
$("#numeric").ejNumericTextbox({ readOnly: true , value:5 });
$("#currency").ejCurrencyTextbox({ readOnly: true , value:5 });
$("#percentage").ejPercentageTextbox({ readOnly: true , value:5 });
</script>showRoundedCorner boolean
Specifies to Change the sharped edges into rounded corner for the Editor.
Default Value
- false
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set showRoundedCorner API value during initialization
$("#numeric").ejNumericTextbox({ showRoundedCorner: true, value:5 });
$("#currency").ejCurrencyTextbox({ showRoundedCorner: true , value:5 });
$("#percentage").ejPercentageTextbox({ showRoundedCorner: true, value:5 });
</script>showSpinButton boolean
Specifies whether the up and down spin buttons should be displayed in editor.
Default Value
- true
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set showSpinButton API value during initialization
$("#numeric").ejNumericTextbox({ showSpinButton: false, value:5 });
$("#currency").ejCurrencyTextbox({ showSpinButton: false, value:55 });
$("#percentage").ejPercentageTextbox({ showSpinButton: false, value:580 });
</script>validateOnType boolean
Enables decimal separator position validation on type .
Default Value
- false
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set validateOnType API value during initialization
$("#numeric").ejNumericTextbox({ validateOnType: true, value:5 });
$("#currency").ejCurrencyTextbox({ validateOnType: true , value:5 });
$("#percentage").ejPercentageTextbox({ validateOnType: true, value:5 });
</script>validationMessage object
Set the jQuery validation error message in editor.
NOTE
The property will work when the widget present inside the form. Additionally need to include jquery.validate.min.js plugin.
Default Value
- null
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set validationMessage API value during initialization
$("#numeric").ejNumericTextbox({ validationRules:{required:true},validationMessage: { required: "Required Numeric value"} });
$("#currency").ejCurrencyTextbox({ validationRules:{required:true},validationMessage: { required: "Required Currency value"} });
$("#percentage").ejPercentageTextbox({ validationRules:{required:true},validationMessage: { required: "Required Percentage value"} });
</script>validationRules object
Set the jQuery validation rules to the editor.
NOTE
The property will work when the widget present inside the form. Additionally need to include jquery.validate.min.js plugin.
Default Value
- null
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set validationRules API value during initialization
$("#numeric").ejNumericTextbox({ validationRules:{required:true} });
$("#currency").ejCurrencyTextbox({ validationRules:{required:true} });
$("#percentage").ejPercentageTextbox({ validationRules:{required:true} });
</script>value number|string
Specifies the value of the editor.
Default Value
- null
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set value API value during initialization
$("#numeric").ejNumericTextbox({ value: 10 });
$("#currency").ejCurrencyTextbox({ value: 10 });
$("#percentage").ejPercentageTextbox({ value: 10 });
</script>watermarkText string
Specifies the watermark text to editor.
Default Value
- Based on the culture.
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set watermarkText API value during initialization
$("#numeric").ejNumericTextbox({ watermarkText: "Enter the value" });
$("#currency").ejCurrencyTextbox({ watermarkText: "Enter the currency value" });
$("#percentage").ejPercentageTextbox({ watermarkText: "Enter the percentage" });
</script>width string
Specifies the width of the editor.
Default Value
- 143
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//To set width API value during initialization
$("#numeric").ejNumericTextbox({ width: "143px", value:5 });
$("#currency").ejCurrencyTextbox({ width: "143px", value:55 });
$("#percentage").ejPercentageTextbox({ width: "143px", value:555 });
</script>Methods
destroy()
destroy the editor widgets all events are unbind automatically and bring the control to pre-init state.
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
$("#numeric").ejNumericTextbox({value:5});
$("#currency").ejCurrencyTextbox({value:55});
$("#percentage").ejPercentageTextbox({value:555});
// Create Editors
var numericObj = $("#numeric").data("ejNumericTextbox");
var currencyObj = $("#currency").data("ejCurrencyTextbox");
var percentObj = $("#percentage").data("ejPercentageTextbox");
numericObj.destroy(); // destroy the numericTextbox
currencyObj.destroy(); // destroy the currencyTextbox
percentObj.destroy(); // destroy the percentageTextbox
</script><input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
$("#numeric").ejNumericTextbox({value:5});
$("#currency").ejCurrencyTextbox({value:55});
$("#percentage").ejPercentageTextbox({value:555});
// destroy the editors
$("#numeric").ejNumericTextbox("destroy");
$("#currency").ejCurrencyTextbox("destroy");
$("#percentage").ejPercentageTextbox("destroy");
</script>disable()
To disable the corresponding Editors
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
$("#numeric").ejNumericTextbox({value:20});
$("#currency").ejCurrencyTextbox({value:400});
$("#percentage").ejPercentageTextbox({value:2000});
// Create Editors
var numericObj = $("#numeric").data("ejNumericTextbox");
var currencyObj = $("#currency").data("ejCurrencyTextbox");
var percentObj = $("#percentage").data("ejPercentageTextbox");
numericObj.disable(); // disable the numericTextbox
currencyObj.disable(); // disable the currencyTextbox
percentObj.disable(); // disable the percentageTextbox
</script><input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
$("#numeric").ejNumericTextbox({value:20});
$("#currency").ejCurrencyTextbox({value:400});
$("#percentage").ejPercentageTextbox({value:2000});
// disable the editors
$("#numeric").ejNumericTextbox("disable");
$("#currency").ejCurrencyTextbox("disable");
$("#percentage").ejPercentageTextbox("disable");
</script>enable()
To enable the corresponding Editors
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
$("#numeric").ejNumericTextbox({value:10});
$("#currency").ejCurrencyTextbox({value:100});
$("#percentage").ejPercentageTextbox({value:1000});
// Create Editors
var numericObj = $("#numeric").data("ejNumericTextbox");
var currencyObj = $("#currency").data("ejCurrencyTextbox");
var percentObj = $("#percentage").data("ejPercentageTextbox");
numericObj.enable(); // enable the numericTextbox
currencyObj.enable(); // enable the currencyTextbox
percentObj.enable(); // enable the percentageTextbox
</script><input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
$("#numeric").ejNumericTextbox({value:10});
$("#currency").ejCurrencyTextbox({value:100});
$("#percentage").ejPercentageTextbox({value:1000});
// enable the editors
$("#numeric").ejNumericTextbox("enable");
$("#currency").ejCurrencyTextbox("enable");
$("#percentage").ejPercentageTextbox("enable");
</script>getValue()
To get value from corresponding Editors
Returns:
number
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
$("#numeric").ejNumericTextbox({value:20});
$("#currency").ejCurrencyTextbox({value:500});
$("#percentage").ejPercentageTextbox({value:1000});
// Create Editors
var numericObj = $("#numeric").data("ejNumericTextbox");
var currencyObj = $("#currency").data("ejCurrencyTextbox");
var percentObj = $("#percentage").data("ejPercentageTextbox");
numericObj.getValue(); // get value from numericTextbox
currencyObj.getValue(); // get value from currencyTextbox
percentObj.getValue(); // get value from percentageTextbox
</script><input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
$("#numeric").ejNumericTextbox({value:20});
$("#currency").ejCurrencyTextbox({value:500});
$("#percentage").ejPercentageTextbox({value:1000});
// get value from editors
$("#numeric").ejNumericTextbox("getValue");
$("#currency").ejCurrencyTextbox("getValue");
$("#percentage").ejPercentageTextbox("getValue");
</script>Events
change
Fires after Editor control value is changed.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the corresponding editor model. |
| type | string | returns the name of the event. |
| value | number | returns the corresponding editor control value. |
| isInteraction | boolean | returns true when the value changed by user interaction otherwise returns false |
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//change event for editors
$("#numeric").ejNumericTextbox({
value:10,
change: function (args) {}
});
$("#currency").ejCurrencyTextbox({
value:100,
change: function (args) {}
});
$("#percentage").ejPercentageTextbox({
value:1000,
change: function (args) {}
});
</script>create
Fires after Editor control is created.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the editor model |
| type | string | returns the name of the event |
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//create event for editors
$("#numeric").ejNumericTextbox({
value:50,
create: function (args) {}
});
$("#currency").ejCurrencyTextbox({
value:505,
create: function (args) {}
});
$("#percentage").ejPercentageTextbox({
value:1500,
create: function (args) {}
});
</script>destroy
Fires when the Editor is destroyed successfully.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the editor model |
| type | string | returns the name of the event |
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//destroy event for editors
$("#numeric").ejNumericTextbox({
value:50,
destroy: function (args) {}
});
$("#currency").ejCurrencyTextbox({
value:505,
destroy: function (args) {}
});
$("#percentage").ejPercentageTextbox({
value:1500,
destroy: function (args) {}
});
</script>focusIn
Fires after Editor control is focused.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the corresponding editor model. |
| type | string | returns the name of the event. |
| value | number | returns the corresponding editor control value. |
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//focusIn event for editors
$("#numeric").ejNumericTextbox({
value:20,
focusIn: function (args) {}
});
$("#currency").ejCurrencyTextbox({
value:200,
focusIn: function (args) {}
});
$("#percentage").ejPercentageTextbox({
value:2000,
focusIn: function (args) {}
});
</script>focusOut
Fires after Editor control is loss the focus.
| Name | Type | Description |
|---|---|---|
| cancel | boolean | if the event should be canceled; otherwise, false. |
| model |
|
returns the corresponding editor model. |
| type | string | returns the name of the event. |
| value | number | returns the corresponding editor control value. |
Example
<input id="numeric" type="text" />
<input id="currency" type="text" />
<input id="percentage" type="text" />
<script>
//focusOut event for editors
$("#numeric").ejNumericTextbox({
value:50,
focusOut: function (args) {}
});
$("#currency").ejCurrencyTextbox({
value:505,
focusOut: function (args) {}
});
$("#percentage").ejPercentageTextbox({
value:1500,
focusOut: function (args) {}
});
</script>