Ej1 api migration in EJ2 JavaScript Maskedtextbox control

8 May 20239 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

$(“#mask”).ejMaskEdit({
maskFormat: “9999”,
cssClass: “custom”
});		 Property: cssClass

var mask = new ej.inputs.MaskedTextBox({
mask: “9999”,
cssClass: “custom”
});
mask.appendTo(“#mask”);
Destroy editor Not Applicable Property: destroy

var mask = new ej.inputs.MaskedTextBox({
mask: “00-000”
});
mask.appendTo(“#mask”);
mask.destroy();
Disable the maskedit control Method: disable

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
value: “1234”
});
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.disable();		 Can be achieved using
API: enabled
var mask = new ej.inputs.MaskedTextBox({
mask: “99,999”
});
mask.appendTo(“#mask”);
var maskObj = document.getElementById(“mask”).ej2_instances[0];
maskObj.enabled= false;
Enable the maskedit control Method: enable

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
value: “1234”
});
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.enable();		 Can be achieved using
API: enabled
var mask = new ej.inputs.MaskedTextBox({
mask: “99,999”
});
mask.appendTo(“#mask”);
var maskObj = document.getElementById(“mask”).ej2_instances[0];
maskObj.enabled= true;
Control state Property: enabled

$(“#mask”).ejMaskEdit({
maskFormat: “00-000”,
enabled: false
});		 Property: enabled

var mask = new ej.inputs.MaskedTextBox({
mask: “00-000”,
enabled: false
});
mask.appendTo(“#mask”);
Persistence Property: enablePersistence

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
enablePersistence: true
});		 Property: enablePersistence

var mask = new ej.inputs.MaskedTextBox({
mask: “0000”,
enablePersistence: true
});
mask.appendTo(“#mask”);
Triggers when editor is focused in Event: focusIn

$(“#mask”).ejMaskEdit({
maskFormat: “00-00”,
focusIn: function() {}
});		 Event: focus

var mask = new ej.inputs.MaskedTextBox({
mask: “0000”,
focus: function() {}
});
mask.appendTo(“#mask”);
Triggers when editor is focused out Event: focusOut

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
focusOut: function() {}
});		 Event blur

var mask = new ej.inputs.MaskedTextBox({
mask: “00000”,
blur: function() {}
});
mask.appendTo(‘#mask”);
Sets height Property: height

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
height : “30px”
});		 Can be achieved using,

var mask = new ej.inputs.MaskedTextBox({
mask: “0000”,
cssClass: “custom”
});
mask.appendTo(“#mask”);
Css
.e-maskedtextbox.custom{
height: 30px;
}
HTML Attributes Property: htmlAttributes

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
htmlAttributes: {name: “maskedtextbox”}
});		 Can be achieved using
HTML
<input id=”mask” type=”text” name=”maskedtextbox” />
var mask = new ej.inputs.MaskedTextBox({
mask: “0000”
});
mask.appendTo(“#mask”);
Specifies Input mode Property: inputMode

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
inputMode: ej.InputMode.Password
});		 Can be achieved using
HTML
<input id=”mask” type=”password” />
var mask = new ej.inputs.MaskedTextBox({
mask: “0000”,
});
mask.appendTo(“#mask”);
Triggers on key press Event: keyPress

$(“#mask”).ejMaskEdit({
maskFormat: “000”,
keyPress: function() {}
});		 Can be achieved using native event
HTML
<input id=”mask” type=”text” onkeypress=”keyPress()” />
<script>
function keyPress(){}
</script>
Triggers on key up Event: keyUp

$(“#mask”).ejMaskEdit({
maskFormat: “9999”,
keyUp: function() {}
});		 Can be achieved using native event
HTML
<input id=”mask” type=”text” onkeyup=”keyUp()” />
<script>
function keyUp(){}
</script>
Triggers on mouse out in maskedit control Event: mouseOut

$(“#mask”).ejMaskEdit({
maskFormat: “0000-000”,
mouseOut: function() {}
});		 Can be achieved using native event
HTML
<input id=”mask” type=”text” onmouseout=”mouseOut()” />
<script>
function mouseOut(){}
</script>
Triggers when mouse over in maskedit control Event: mouseOver

$(“#mask”).ejMaskEdit({
maskFormat: “00-00”,
mouseOver: function() {}
});		 Can be achieved using native event
HTML
<input id=”mask” type=”text” onmouseover=”mouseOver()” />
<script>
function mouseOver(){}
</script>
Name of maskedit control Property: name

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
name: “pin”
});		 Can be achieved using
HTML
<input id=”mask” type=”text” name=”maskedtextbox” />
var mask = new ej.inputs.MaskedTextBox({
mask: “0000”,
});
mask.appendTo(“#mask”);
Triggers on keydown Event: onKeyDown

$(“#mask”).ejMaskEdit({
maskFormat: “9999-9999”,
onKeyDown: function() {}
});		 Can be achieved using native event
HTML
<input id=”mask” type=”text” onkeydown=”keyDown()” />
<script>
function keyDown(){}
</script>
Read only Property: readOnly

$(“#mask”).ejMaskEdit({
maskFormat: “99-999”,
readOnly: true
});		 Can be achieved using,
var mask = new ej.inputs.MaskedTextBox({
mask: “0000”,
enabled: false,
});
mask.appendTo(“#mask”);
CSS
.e-mask{
background-image: none !important;
border-bottom-color: rgba(0, 0, 0, 0.42) !important;
}
Right to left Property: textAlign

$(“#mask”).ejMaskEdit({
maskFormat: “9999”,
textAlign: “right”
});		 Property: enableRtl

var mask = new ej.inputs.MaskedTextBox({
mask: “9999”,
enableRtl: true
});
mask.appendTo(“#mask”);
Sets width Property: width

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
width: “100px”
});		 Property: width

var mask = new ej.inputs.MaskedTextBox({
mask: “0000”,
width: “100px”
});
mask.appendTo(“#mask”);

Mask Configuration

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

$(“#mask”).ejMaskEdit({
maskFormat: “00-00”,
change: function() {}
});		 Event: change

var mask = new ej.inputs.MaskedTextBox({
mask: “00-00”,
change: function() {}
});
mask.appendTo(“#mask”);
Clears maskedit text/value Method: clear

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
value: “1234”
});
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.clear();		 Can be achieved using
var mask = new ej.inputs.MaskedTextBox({
mask: “99,999”
});
mask.appendTo(“#mask”);
var maskObj = document.getElementById(“mask”).ej2_instances[0];
maskObj.value =””;
Triggers on creation Event: create

$(“#mask”).ejMaskEdit({
maskFormat: “00-00”,
create: function() {}
});		 Event: created

var mask = new ej.inputs.MaskedTextBox({
mask: “00-00”,
created: function() {}
});
mask.appendTo(“#mask”);
Custom Character Property: customCharacter

$(“#mask”).ejMaskEdit({
maskFormat: “C-0000”,
customCharacter :”#”
});		 Property: customCharacters

var mask = new ej.inputs.MaskedTextBox({
mask: “C-0000”,
customCharacters: {C: ‘#’}
});
mask.appendTo(“#mask”);
Triggers when maskedit control is destroyed Event: destroy

$(“#mask”).ejMaskEdit({
maskFormat: “00-00”,
destroy: function() {}
});		 Event: destroyed

var mask = new ej.inputs.MaskedTextBox({
mask: “00-00”,
destroyed: function() {}
});
mask.appendTo(“#mask”);
Placeholder float type Not Applicable Property: floatLabelType

var mask = new ej.inputs.MaskedTextBox({
mask: “9,999”,
placeholder: “Enter value”,
floatLabelType: “Auto”
});
mask.appendTo(“#mask”);
Gets pure value of maskedit control Method: get_StrippedValue

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
value: “123”
});
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_StrippedValue();		 Can be achieved using,
var mask = new ej.inputs.MaskedTextBox({
mask: “00-00”,
value: “1234”
});
mask.appendTo(“#mask”);
var maskObj = document.getElementById(“mask”).ej2_instances[0];
alert(maskObj.value);
Get whole maskedit value Method: get_UnstrippedValue

$(“#mask”).ejMaskEdit({
maskFormat: “00-00”,
value: “1234”
});
var maskObj = $(“#mask”).data(“ejMaskEdit”);
maskObj.get_UnstrippedValue();		 Method: getMaskedValue

var mask = new ej.inputs.MaskedTextBox({
mask: “00-00”,
value: “1234”
});
mask.appendTo(“#mask”);
mask.getMaskedValue();
Hides prompt character on focus out Property: hidePromptOnLeave

$(“#mask”).ejMaskEdit({
maskFormat: “aaaa”,
hidePromptOnLeave: true
});		 Can be achieved using
var mask = new ej.inputs.MaskedTextBox({
mask: ‘000-000-0000’,
focus: function(){
this.promptChar =”_”;
}
});
var maskObj = document.getElementById(“mask1”)
maskObj.addEventListener(“focusout”,function(){
maskObj.ej2_instances[0].promptChar = “ “;
}
Mask format Property: maskFormat

$(“#mask”).ejMaskEdit({
maskFormat: “99,999”
});		 Property: mask

var mask = new ej.inputs.MaskedTextBox({
mask: “99,999”
});
mask.appendTo(“#mask”);
Prompt character Not Applicable Property: promptChar

var mask = new ej.inputs.MaskedTextBox({
mask: “0000”,
promptChar: “#”
});
mask.appendTo(“#mask”);
Clear Button Not Applicable Property: promptChar

var mask = new ej.inputs.MaskedTextBox({
mask: “aaaa”,
showClearButton: true
});
mask.appendTo(“#mask”);
Prompt character display Property: showPromptChar

$(“#mask”).ejMaskEdit({
maskFormat: “$ 99-999”,
showPromptChar: false
});		 Can be achieved using
var mask = new ej.inputs.MaskedTextBox({
mask: “0000”,
promptChar: “ “
});
mask.appendTo(“#mask”);
Show rounded corner Property: showRoundedCorner

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
showRoundedCorner: true
});		 Can be achieved using following Css
var mask = new ej.inputs.MaskedTextBox({
mask: “9999”,
cssClass: “e-style”,
floatLabelType: “Always”
});
mask.appendTo(“#mask”);
CSS
#mask{
border: 2px solid grey;
padding: 10px;
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 ;
}
</style>
Value of maskedit control Property: value

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
value: “1234”
});		 Property: value

var mask = new ej.inputs.MaskedTextBox({
mask: “0000”,
value: “1234”
});
mask.appendTo(“#mask”);
Displays hint on maskedit control Property: watermarkText

$(“#mask”).ejMaskEdit({
maskFormat: “9999”,
watermarkText: “Enter value”
});		 Property: placeholder

var mask = new ej.inputs.MaskedTextBox({
mask: “9999”,
placeholder: “Enter value”
});
mask.appendTo(“#mask”);

Validation

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

$(“#mask”).ejMaskEdit({
maskFormat: “99-999”,
showError: true
});		 MaskedTextBox by default shows error until correct value is entered.
var mask = new ej.inputs.MaskedTextBox({
mask: “9999”,
placeholder: “Enter value”
});
mask.appendTo(“#mask”);
Validation message Property: validationMessage

$(“#mask”).ejMaskEdit({
maskFormat: “0000”,
validationRules: {required: true},
validationMessage: {required: “Required value”}
});		 Validation in MaskedTextBox can be achieved through form validation
var options = {
rules: {
‘maskValue’: { required: [ true, ‘Enter valid mobile number’] },
},
}
var formObject = new ej.inputs.FormValidator(‘#form-element’, options);
formObject.customPlacement = function(element, error) {
document.querySelector(“.form-group”).appendChild(error);
};
var mask = new ej.inputs.MaskedTextBox({
mask: ‘000-000-0000’,
});
mask.appendTo(“#mask”);
HTML
<form id=”form-element” class=”form-horizontal”>
<div class = “form-group”>
<input id=”mask” type=”text” name=”maskValue” class=”form-control” />
<div id=”error”></div>
</div
</form>
Validation Rules Property: validationRules

$(“#mask”).ejMaskEdit({
maskFormat: “00-00”,
validationRules: {required: true}
});		 Validation in MaskedTextBox can be achieved through form validation
var options = {
rules: {
‘maskValue’: { required: [ true] },
},
}
var formObject = new ej.inputs.FormValidator(‘#form-element’, options);
formObject.customPlacement = function(element, error) {
document.querySelector(“.form-group”).appendChild(error);
};
var mask = new ej.inputs.MaskedTextBox({
mask: ‘000-000-0000’,
});
mask.appendTo(“#mask”);
HTML
<form id=”form-element” class=”form-horizontal”>
<div class = “form-group”>
<input id=”mask” type=”text” name=”maskValue” class=”form-control” />
<div id=”error”></div>
</div>
</form>