React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in React MaskedTextBox component

18 May 2022 / 7 minutes to read

This article describes the API migration process of MaskEdit component from Essential JS 1 to Essential JS 2.

Common

Behavior API in Essential JS 1 API in Essential JS 2
Adding custom class Property: cssClass

<EJ.MaskEdit id="mask" maskFormat="9999" cssClass="custom"></EJ.MaskEdit>		 Property: cssClass

<MaskedTextBoxComponent id="mask" mask='9999' cssClass = "custom"></MaskedTextBoxComponent>
Destroy editor Not Applicable Method: destroy

<MaskedTextBoxComponent id="mask" mask='00-000'></MaskedTextBoxComponent>
var mask = document.getElementById('mask').ej2_instances[0];
mask.destroy();
Disable the maskedit control Method: disable

<EJ.MaskEdit id="mask" maskFormat="0000" value={1234}></EJ.MaskEdit>
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.disable();		 Can be achieved using
<MaskedTextBoxComponent id="mask" mask='00-000'></MaskedTextBoxComponent>
var mask = document.getElementById('mask').ej2_instances[0];
mask.enabled= false;
Enable the maskedit control Method: enable

<EJ.MaskEdit id="mask" maskFormat="0000" value={1234}></EJ.MaskEdit>
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.enable();		 Can be achieved using
<MaskedTextBoxComponent id="mask" mask='00-000'></MaskedTextBoxComponent>
var mask = document.getElementById('mask').ej2_instances[0];
mask.enabled= true;
Control state Property: enabled

<EJ.MaskEdit id="mask" maskFormat="0-0000" enabled={false}></EJ.MaskEdit>		 Property: enabled

<MaskedTextBoxComponent id="mask" mask='00-000' enabled=false></MaskedTextBoxComponent>
Persistence Property: enablePersistence

<EJ.MaskEdit id="mask" maskFormat="0000" enablePersistence={{true}}></EJ.MaskEdit>		 Property: enablePersistence

<MaskedTextBoxComponent id="mask" mask='0000' enablePersistence=true></MaskedTextBoxComponent>
Triggers when editor is focused in Event: focusIn

<EJ.MaskEdit id="mask" maskFormat="00-00" focusIn={this.focusIn}></EJ.MaskEdit>

script
focusIn: function() {}		 Event: focus

<MaskedTextBoxComponent id="mask" mask='00-00' focus={this.onFocus.bind(this)}></MaskedTextBoxComponent>

public onFocus() {}
Triggers when editor is focused out Event: focusOut

<EJ.MaskEdit id="mask" maskFormat="0000" focusOut={this.focusOut}></EJ.MaskEdit>

script
focusOut: function() {}		 Event: blur

<MaskedTextBoxComponent id="mask" mask='00-00' blur={this.onBlur.bind(this)}></MaskedTextBoxComponent>

script
public onBlur() {}
Sets height Property: height

<EJ.MaskEdit id="mask" maskFormat="0000" height="30px"></EJ.MaskEdit>		 Can be achieved using,

<MaskedTextBoxComponent id="mask" mask='0000' cssClass = "custom"></MaskedTextBoxComponent>
Css
.e-maskedtextbox.custom{
height: 30px
}
HTML Attributes Property: htmlAttributes

<EJ.MaskEdit id="mask" maskFormat="0000" htmlAttributes= {htmlAttr}></EJ.MaskEdit>

script
var htmlAttr = {name: "maskedtextbox"};		 Can be achieved using
<MaskedTextBoxComponent id="mask" mask='00-000' name="textbox"></MaskedTextBoxComponent>
Specifies Input mode Property: inputMode

<EJ.MaskEdit id="mask" maskFormat="0000" inputMode="password"></EJ.MaskEdit>		 Can be achieved using
<MaskedTextBoxComponent type="password" name="mask"></MaskedTextBoxComponent>
Triggers on key press Event: keyPress

<EJ.MaskEdit id="mask" maskFormat="0000" keyPress={this.keyPress}></EJ.MaskEdit>

script
keyPress: function() {}		 Can be achieved using
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent>
public onCreated(){
document.getElementById("mask").addEventListener('keypress',function(){});
}
Triggers on key up Event: keyUp

<EJ.MaskEdit id="mask" maskFormat="0000" keyUp={this.keyUp}></EJ.MaskEdit>

script
keyUp: function() {}		 Can be achieved using
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent>
public onCreated(){
document.getElementById("mask").addEventListener('keyup',function(){});
}
Triggers on mouse out in maskedit control Event: mouseOut

<EJ.MaskEdit id="mask" maskFormat="0000-000" mouseOut={this.onMouseOut}></EJ.MaskEdit>

script
onMouseOut: function() {}		 Can be achieved using
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent>
public onCreated(){
document.getElementById("mask").addEventListener('mouseout',function(){}
);
}
Triggers when mouse over in maskedit control Event: mouseOver

<EJ.MaskEdit id="mask" maskFormat="00-00" mouseOver={this.onMouseOver}></EJ.MaskEdit>

script
onMouseOver: function() {}		 Can be achieved using
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent>
public onCreated(){
document.getElementById("mask").addEventListener('mouseover',function(){});
}
Name of maskedit control Property: name

<EJ.MaskEdit id="mask" maskFormat="0000" name="pin"></EJ.MaskEdit>		 Can be achieved using
<MaskedTextBoxComponent id="mask" mask='00-000' name="textbox"></MaskedTextBoxComponent>
Triggers on keydown Event: onKeyDown

<EJ.MaskEdit id="mask" maskFormat="9999-9999" onKeyDown={this.onKeyDown}></EJ.MaskEdit>

script
onKeyDown: function() {}		 Can be achieved using
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent>
public onCreated(){
document.getElementById("mask").addEventListener('keydown',function(){});
}
Read only Property: readOnly

<EJ.MaskEdit id="mask" maskFormat="99-999" readOnly={true}></EJ.MaskEdit>		 Can be achieved by
<MaskedTextBoxComponent mask='000-000-0000' enabled={false}></MaskedTextBoxComponent>
CSS
.e-mask{
background-image: none !important ;
border-bottom-color: rgba(0, 0, 0, 0.42) !important ;
}
Right to left Property: textAlign

<EJ.MaskEdit id="mask" maskFormat="9999" textAlign="Right"></EJ.MaskEdit>		 Property: enableRtl

<MaskedTextBoxComponent id="mask" mask='9999' enableRtl = true></MaskedTextBoxComponent>
Sets width Property: width

<EJ.MaskEdit id="mask" maskFormat="0000" width="100px"></EJ.MaskEdit>		 Property: width

<MaskedTextBoxComponent id="mask" mask='0000' width ="100px"></MaskedTextBoxComponent>

Mask Configuration

Behavior API in Essential JS 1 API in Essential JS 2
Triggers on value change Event change

<EJ.MaskEdit id="mask" maskFormat="00-00" change={this.onChange}></EJ.MaskEdit>

script
onChange: function() {}		 Event: change

<MaskedTextBoxComponent id="mask" mask='00-00' change={this.onChange.bind(this)}></MaskedTextBoxComponent>

public onChange() {}
Clears maskedit text/value Method: clear

<EJ.MaskEdit id="mask" maskFormat="0000" value={1234}></EJ.MaskEdit>
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.clear();		 Can be achieved using
<MaskedTextBoxComponent id="mask" mask='00-000' value="1234"></MaskedTextBoxComponent>
var mask = document.getElementById('mask').ej2_instances[0];
mask.value= "";
Triggers on creation Event: create

<EJ.MaskEdit id="mask" maskFormat="00-00" create={this.onCreate}></EJ.MaskEdit>

script
onCreate: function() {}		 Event: created

<MaskedTextBoxComponent id="mask" mask='00-00' created={this.onCreated.bind(this)}></MaskedTextBoxComponent>

public onCreated() {}
Custom Character Property: customCharacter

<EJ.MaskEdit id="mask" maskFormat="C-0000" customCharacter="#"></EJ.MaskEdit>		 Property: customCharacters

<MaskedTextBoxComponent id="mask" mask='C-0000' customCharacters= {this.chars}></MaskedTextBoxComponent>

public customCharacters: object = {C: '#'};
Triggers when maskedit control is destroyed Event: destroy

<EJ.MaskEdit id="mask" maskFormat="00-00" destroy={this.onDestroy}></EJ.MaskEdit>

script
onDestroy: function() {}		 Event: destroyed

<MaskedTextBoxComponent id="mask" mask='00-00' destroyed={this.onDestroyed.bind(this)}></MaskedTextBoxComponent>

public onDestroyed() {}
Placeholder float type Not Applicable Property: floatLabelType

<MaskedTextBoxComponent id="mask" mask='9,999' placeholder="Enter value" floatLabelType="Auto"></MaskedTextBoxComponent>
Gets pure value of maskedit control Method: get_StrippedValue

<EJ.MaskEdit id="mask" maskFormat="0000" value={123}></EJ.MaskEdit>

script
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_StrippedValue();		 Can be achieved using
<MaskedTextBoxComponent id="mask" mask='00-000'></MaskedTextBoxComponent>
var mask = document.getElementById('mask').ej2_instances[0];
alert(mask.value);
Get whole maskedit value Method: get_UnstrippedValue

<EJ.MaskEdit id="mask" maskFormat="00-00" value={1234}></EJ.MaskEdit>
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_UnstrippedValue();		 Method: getMaskedValue

script
<MaskedTextBoxComponent id="mask" mask='00-00' value="1234"></MaskedTextBoxComponent>
var mask = document.getElementById('mask').ej2_instances[0];
mask.getMaskedValue();
Hides prompt character on focus out Property: hidePromptOnLeave

<EJ.MaskEdit id="mask" maskFormat="aaaa" hidePromptOnLeave={true}></EJ.MaskEdit>		 Can be achieved by
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} focus={this.onfocus.bind(this)} floatLabelType="Always"> </MaskedTextBoxComponent>
Script
public onCreated(){
var maskObj = document.getElementById("mask");
maskObj.addEventListener('focusout',function(){
maskObj.ej2_instances[0].promptChar = " "
})'
}
public onfocus(){
var maskObj = document.getElementById("mask").ej2_instances[0];
maskObj.promptChar= "_";
}
Mask format Property: maskFormat

<EJ.MaskEdit id="mask" maskFormat="99,999"></EJ.MaskEdit>		 Property: mask

<MaskedTextBoxComponent id="mask" mask='99,999'></MaskedTextBoxComponent>
Prompt character Not Applicable Property: promptChar

<MaskedTextBoxComponent id="mask" mask='0000' promptChar="#"></MaskedTextBoxComponent>
Clear Button Not Applicable Property: showClearButton

<MaskedTextBoxComponent id="mask" mask='aaaa' showClearButton=true></MaskedTextBoxComponent>
Prompt character display Property: showPromptChar

<EJ.MaskEdit id="mask" maskFormat="$99-999" showPromptChar={false}></EJ.MaskEdit>		 Can be achieved using
<MaskedTextBoxComponent id="mask" mask='0000' promptChar=" "></MaskedTextBoxComponent>
Show rounded corner Property: showRoundedCorner

<EJ.MaskEdit id="mask" maskFormat="0000" showRoundedCorner={true}></EJ.MaskEdit>		 Can be achieved using
<MaskedTextBoxComponent mask="9999-999-999" value= '9789660245' id="mask1" placeholder="Numeric TextBox" cssClass = "e-style" floatLabelType="Always"> </MaskedTextBoxComponent>
CSS
#mask1{
border: 2px solid grey;
padding: 7px;
border-radius: 10px;
}
.e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::before, .e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::after {
background: none ;
}
Value of maskedit control Property: value

<EJ.MaskEdit id="mask" maskFormat="0000" value={1234}></EJ.MaskEdit>		 Property: value

<MaskedTextBoxComponent id="mask" mask='0000' value="1234"></MaskedTextBoxComponent>
Displays hint on maskedit control Property: watermarkText

<EJ.MaskEdit id="mask" maskFormat="9999" watermarkText="Enter value"></EJ.MaskEdit>		 Property: placeholder

<MaskedTextBoxComponent id="mask" mask='9999' placeholder="Enter value"></MaskedTextBoxComponent>

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Displays error until correct value is entered Property: showError

<EJ.MaskEdit id="mask" maskFormat="99-999" showError={true}></EJ.MaskEdit>		 MaskedTextBox by default shows error until the correct value is entered
<MaskedTextBoxComponent id="mask" mask='0000' value="1234"></MaskedTextBoxComponent>
Validation message Property: validationMessage

<EJ.MaskEdit id="mask" maskFormat="0000" validationRules= {validationRules} validationMessage= {validationMessage}></EJ.MaskEdit>

var validationRules = {required: {true}};
var validationMessage = {required: "Required value"};		 Validation can be performed using Form Validation
<MaskedTextBoxComponent id="mask" name="mask_value" placeholder="Mobile Number" mask= "000-000-0000" floatLabelType='Always' />
let options: FormValidatorModel = {
rules: {
'mask_value': { numberValue: [required, 'Enter valid mobile number'] }
},
customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
document.querySelector("#masktextbox").appendChild(errorElement);
}
};
let formObject: FormValidator = new FormValidator('#form-element', options);
HTML
<form id="form-element" class="form-horizontal">
<div id='masktextbox'></div>
</form>
Validation Rules Property: validationRules

<EJ.MaskEdit id="mask" maskFormat="00-00" validationRules= {validationRules}></EJ.MaskEdit>

var validationRules = {required: {true}};		 Validation can be performed using Form Validation
<MaskedTextBoxComponent id="mask" name="mask_value" placeholder="Mobile Number" mask= "000-000-0000" floatLabelType='Always' />
let options: FormValidatorModel = {
rules: {
'mask_value': { numberValue: [required, true] }
},
customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
document.querySelector("#masktextbox").appendChild(errorElement);
}
};
let formObject: FormValidator = new FormValidator('#form-element', options);
HTML
<form id="form-element" class="form-horizontal">
<div id='masktextbox'></div>
</form>
Previous
Next