Represents the Essential JS 2 VueJS NumericTextBox Component
<ejs-numerictextbox v-bind:value='value'></ejs-numerictextbox>
string
Gets or Sets the CSS classes to root element of the NumericTextBox which helps to customize the complete UI styles for the NumericTextBox component.
Defaults to null
string
Specifies the currency code to use in currency formatting. Possible values are the ISO 4217 currency codes, such as ‘USD’ for the US dollar,‘EUR’ for the euro.
Defaults to null
number
Specifies the number precision applied to the textbox value when the NumericTextBox is focused. For more information on decimals, refer to decimals.
Defaults to null
boolean
Enable or disable persisting NumericTextBox state between page reloads. If enabled, the value
state will be persisted.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
Sets a value that enables or disables the NumericTextBox control.
Defaults to true
The placeholder acts as a label and floats above the NumericTextBox based on the below values. Possible values are:
Never
- Never floats the label in the NumericTextBox when the placeholder is available.Always
- The floating label always floats above the NumericTextBox.Auto
- The floating label floats above the NumericTextBox after focusing it or when enters the value in it.Defaults to Never
string
Specifies the number format that indicates the display format for the value of the NumericTextBox. For more information on formats, refer to formats.
Defaults to ‘n2’
{ : }
You can add the additional html attributes such as disabled, value etc., to the element. If you configured both property and equivalent html attribute then the component considers the property value.
<template>
<ejs-numerictextbox :htmlAttributes="htmlAttributes"></ejs-numerictextbox>
</template>
<script>
import Vue from "vue";
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(NumericTextBoxPlugin);
export default {
data() {
return {
htmlAttributes: { name: "quantity", min: "0", max:"100" }
};
}
};
</script>
Defaults to {}
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
number
Specifies a maximum value that is allowed a user can enter. For more information on max, refer to max.
Defaults to null
number
Specifies a minimum value that is allowed a user can enter. For more information on min, refer to min.
Defaults to null
string
Gets or sets the string shown as a hint/placeholder when the NumericTextBox is empty. It acts as a label and floats above the NumericTextBox based on the floatLabelType.
Defaults to null
boolean
Sets a value that enables or disables the readonly state on the NumericTextBox. If it is true, NumericTextBox will not allow your input.
Defaults to false
boolean
Specifies whether to show or hide the clear icon.
Defaults to false
boolean
Specifies whether the up and down spin buttons should be displayed in NumericTextBox.
Defaults to true
number
Specifies the incremental or decremental step size for the NumericTextBox. For more information on step, refer to step.
Defaults to 1
boolean
Specifies a value that indicates whether the NumericTextBox control allows the value for the specified range. If it is true, the input value will be restricted between the min and max range. The typed value gets modified to fit the range on focused out state. Else, it allows any value even out of range value, At that time of wrong value entered, the error class will be added to the component to highlight the error.
<template>
<ejs-numerictextbox strictMode="false" min="10" max="20" value="25"></ejs-numerictextbox>
</template>
<script>
import Vue from "vue";
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(NumericTextBoxPlugin);
export default {
data() {
return {
};
}
};
</script>
Defaults to true
boolean
Specifies whether the decimals length should be restricted during typing.
Defaults to false
number
Sets the value of the NumericTextBox.
Defaults to null
number
| string
Specifies the width of the NumericTextBox.
Defaults to null
Decrements the NumericTextBox value with specified step value.
Parameter | Type | Description |
---|---|---|
step (optional) | number |
Specifies the value used to decrement the NumericTextBox value. if its not given then numeric value will be decremented based on the step property value. |
Returns void
Removes the component from the DOM and detaches all its related event handlers. Also it maintains the initial input element from the DOM.
Returns void
Sets the focus to widget for interaction.
Returns void
Remove the focus from widget, if the widget is in focus state.
Returns void
Gets the properties to be maintained in the persisted state.
Returns string
Returns the value of NumericTextBox with the format applied to the NumericTextBox.
Returns string
Increments the NumericTextBox value with the specified step value.
Parameter | Type | Description |
---|---|---|
step (optional) | number |
Specifies the value used to increment the NumericTextBox value. if its not given then numeric value will be incremented based on the step property value. |
Returns void
EmitType<NumericBlurEventArgs>
Triggers when the NumericTextBox got focus out.
Triggers when the value of the NumericTextBox changes. The change event of the NumericTextBox component will be triggered in the following scenarios:
EmitType<Object>
Triggers when the NumericTextBox component is created.
EmitType<Object>
Triggers when the NumericTextBox component is destroyed.
EmitType<NumericFocusEventArgs>
Triggers when the NumericTextBox got focus in.