How can I add PlaceHolder for MaskedTextBox?

[Anatoli]

I want to add a Placeholder to my MaskedTextBox. But adding the placeholder attribute does not work.

I even set maskOnFocus to true so that placeholder will be shown but to no avail.

<kendo-maskedtextbox [maskOnFocus]="true" [mask]="mask" [value]="value" placeholder="Phone Number"></kendo-maskedtextbox>

 

Is there a way for me to achieve this in the current version?

And are there plans to support placeholder in MaskedTextBox in the near future?

[Hetali]

Hello Purna,

In order to add a placeholder in the Kendo UI MaskedTextBox, use the focus event to initialize the mask value, ngAfterViewInit function to set the placeholder attribute in the k-textbox class and set the maskOnFocus property to true. For example:

<kendo-maskedtextbox 
  [mask]="mask" 
  (focus)="focus()"
  [maskOnFocus]="true">
</kendo-maskedtextbox>

public mask: string;

ngAfterViewInit() {
  var a = document.getElementsByClassName("k-textbox")
  for(let i = 0; i< a.length; i++){
    a[i].setAttribute("placeholder", "Phone Number");
  }
}

focus() {
  this.mask  = "[phone]-00";
}

In this StackBlitz example, the MaskedTextBox has a placeholder when it is not focused and a mask when it is focused.

Please vote and follow this feature request to receive updates for the placeholder feature in the Kendo UI MaskedTextBox. The feature will be added to our roadmap based on the customer demand, votes, etc.

I hope this helps. Please let me know if you have any further questions pertaining to the placeholder in the Kendo UI MaskedTextBox.

Regards,
Hetali
Progress Telerik