Represents the Essential JS 2 VueJS MaskedTextBox Component
<ejs-maskedtextbox v-bind:value='value'></ejs-maskedtextbox>
string
Gets or sets the CSS classes to root element of the MaskedTextBox which helps to customize the complete UI styles for the MaskedTextBox component.
Defaults to null
{ : }
Sets the collection of values to be mapped for non-mask elements(literals) which have been set in the mask of MaskedTextBox. In the below example, non-mask elements “P” accepts values “P” , “A” , “p” , “a” and “M” accepts values “M”, “m” mentioned in the custom characters collection.
For more information on customCharacters, refer to customCharacters.
<template>
<ejs-maskedtextbox :mask="mask" :customCharacters="customCharacters"></ejs-maskedtextbox>
</template>
<script>
import Vue from "vue";
import { MaskedTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(MaskedTextBoxPlugin);
export default {
data() {
return {
mask: "99 : 99 PM",
customCharacters: { P: 'P,A,p,a', M: 'M,m' }
};
}
};
</script>
Defaults to null
boolean
Sets a value that enables or disables the persisting state of the MaskedTextBox after reloading the page. 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 MaskedTextBox component.
Defaults to true
The placeholder acts as a label and floats above the MaskedTextBox based on the below values. Possible values are:
Defaults to Never
{ : }
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-maskedtextbox :htmlAttributes="htmlAttributes" :mask="mask" :value="value"></ejs-maskedtextbox>
</template>
<script>
import Vue from "vue";
import { MaskedTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(MaskedTextBoxPlugin);
export default {
data() {
return {
htmlAttributes: { name: "phonenumber", tabindex: "-1", readonly:"readonly" },
mask: "000-000",
value: "6000021"
};
}
};
</script>
Defaults to {}
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
string
Sets a value that masks the MaskedTextBox to allow/validate the user input.
standard mask elements
, custom characters
and
regular expression
as mask
elements.
For more information on mask, refer to
mask.<template>
<ejs-maskedtextbox :mask="mask"></ejs-maskedtextbox>
</template>
<script>
import Vue from "vue";
import { MaskedTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(MaskedTextBoxPlugin);
export default {
data() {
return {
mask: "####.##"
};
}
};
</script>
Defaults to null
string
Gets or sets the string shown as a hint/placeholder when the MaskedTextBox is empty. It acts as a label and floats above the MaskedTextBox based on the floatLabelType.
Defaults to null
string
Gets or sets a value that will be shown as a prompting symbol for the masked value. The symbol used to show input positions in the MaskedTextBox. For more information on prompt-character, refer to prompt-character.
Defaults to ’_’
boolean
Specifies the boolean value whether the Masked TextBox allows the user to change the text.
Defaults to false
boolean
Specifies whether to show or hide the clear icon.
Defaults to false
string
Gets or sets the value of the MaskedTextBox. It is a raw value of the MaskedTextBox excluding literals
and prompt characters. By using getMaskedValue
property, you can get the value of MaskedTextBox with the masked format.
<template>
<ejs-maskedtextbox :mask="mask" :value="value"></ejs-maskedtextbox>
</template>
<script>
import Vue from "vue";
import { MaskedTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(MaskedTextBoxPlugin);
export default {
data() {
return {
mask: "(999) 9999-999",
value: "8674321756"
};
}
};
</script>
Defaults to null
number
| string
Sets the width of the MaskedTextBox.
Defaults to null
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 value of the MaskedTextBox with the masked format.
By using value
property, you can get the raw value of maskedtextbox without literals and prompt characters.
Returns string
Gets the properties to be maintained in the persisted state.
Returns string
Triggers when the MaskedTextBox got focus out.
Triggers when the value of the MaskedTextBox changes.
EmitType<Object>
Triggers when the MaskedTextBox component is created.
EmitType<Object>
Triggers when the MaskedTextBox component is destroyed.
Triggers when the MaskedTextBox got focus in.