Vue

Search results

MaskedTextBoxComponent

Represents the Essential JS 2 VueJS MaskedTextBox Component

<ejs-maskedtextbox v-bind:value='value'></ejs-maskedtextbox>

Properties

cssClass
`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

customCharacters
`Object`

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

enablePersistence
`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

enableRtl
`boolean`

Enable or disable rendering component in right to left direction.

Defaults to false

enabled
`boolean`

Sets a value that enables or disables the MaskedTextBox component.

Defaults to true

floatLabelType
`string`

The placeholder acts as a label and floats above the MaskedTextBox based on the below values. Possible values are:

Never - The floating label will not be enable when the placeholder is available.
Always - The floating label always floats above the MaskedTextBox.
Auto - The floating label floats above the MaskedTextBox after focusing it or when enters the value in it.

Defaults to Never

htmlAttributes
`Object`

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 {}

locale
`string`

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

mask
`string`

Sets a value that masks the MaskedTextBox to allow/validate the user input.

Mask allows standard mask elements , custom characters and regular expression as mask elements. For more information on mask, refer to mask.

If the mask value is empty, the MaskedTextBox will behave as an input element with text type.

<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: ”####.##” }; } };

Defaults to *null*

<h3 class="doc-prop-wrapper" id="placeholder" data-Path="placeholder-placeholder">
<a href="#placeholder" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>placeholder</span>

<span class="doc-prop-type"> `string`
</span>

</h3>


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
<b><a href="#floatlabeltype" target="_blank">floatLabelType.</a></b>

Defaults to *null*

<h3 class="doc-prop-wrapper" id="promptchar" data-Path="promptchar-promptChar">
<a href="#promptchar" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>promptChar</span>

<span class="doc-prop-type"> `string`
</span>

</h3>


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](../../maskedtextbox/mask-configuration/#prompt-character).

Defaults to *'_'*

<h3 class="doc-prop-wrapper" id="readonly" data-Path="readonly-readonly">
<a href="#readonly" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>readonly</span>

<span class="doc-prop-type"> `boolean`
</span>

</h3>


Specifies the boolean value whether the Masked TextBox allows the user to change the text.

Defaults to *false*

<h3 class="doc-prop-wrapper" id="showclearbutton" data-Path="showclearbutton-showClearButton">
<a href="#showclearbutton" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>showClearButton</span>

<span class="doc-prop-type"> `boolean`
</span>

</h3>


Specifies whether to show or hide the clear icon.

Defaults to *false*

<h3 class="doc-prop-wrapper" id="value" data-Path="value-value">
<a href="#value" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>value</span>

<span class="doc-prop-type"> `string`
</span>

</h3>


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.
```html
<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

width
`number` | `string`

Sets the width of the MaskedTextBox.

Defaults to null

Methods

destroy

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

focusIn

Sets the focus to widget for interaction.

Returns void

focusOut

Remove the focus from widget, if the widget is in focus state.

Returns void

getMaskedValue

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

getPersistData

Gets the properties to be maintained in the persisted state.

Returns string

Events

blur
`EmitType<MaskBlurEventArgs>`

Triggers when the MaskedTextBox got focus out.

change
`EmitType<MaskChangeEventArgs>`

Triggers when the value of the MaskedTextBox changes.

created
`EmitType<Object>`

Triggers when the MaskedTextBox component is created.

destroyed
`EmitType<Object>`

Triggers when the MaskedTextBox component is destroyed.

focus
`EmitType<MaskFocusEventArgs>`

Triggers when the MaskedTextBox got focus in.

Contents

Properties
cssClass
customCharacters
enablePersistence
enableRtl
enabled
floatLabelType
htmlAttributes
locale
mask
placeholder
promptChar
readonly
showClearButton
value
width
Methods
destroy
focusIn
focusOut
getMaskedValue
getPersistData
Events
blur
change
created
destroyed
focus

Contents

Properties
cssClass
customCharacters
enablePersistence
enableRtl
enabled
floatLabelType
htmlAttributes
locale
mask
placeholder
promptChar
readonly
showClearButton
value
width
Methods
destroy
focusIn
focusOut
getMaskedValue
getPersistData
Events
blur
change
created
destroyed
focus

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

MaskedTextBoxComponent

Properties

cssClass string

customCharacters Object

enablePersistence boolean

enableRtl boolean

enabled boolean

floatLabelType string

htmlAttributes Object

locale string

mask string

width number | string

Methods

destroy

focusIn

focusOut

getMaskedValue

getPersistData

Events

blur EmitType<MaskBlurEventArgs>

change EmitType<MaskChangeEventArgs>

created EmitType<Object>

destroyed EmitType<Object>

focus EmitType<MaskFocusEventArgs>

cssClass
`string`

customCharacters
`Object`

enablePersistence
`boolean`

enableRtl
`boolean`

enabled
`boolean`

floatLabelType
`string`

htmlAttributes
`Object`

locale
`string`

mask
`string`

width
`number` | `string`

blur
`EmitType<MaskBlurEventArgs>`

change
`EmitType<MaskChangeEventArgs>`

created
`EmitType<Object>`

destroyed
`EmitType<Object>`

focus
`EmitType<MaskFocusEventArgs>`