This is a migrated thread and some comments may be shown as answers.

How can I add PlaceHolder for MaskedTextBox?

1 Answer 1024 Views
MaskedTextBox
This is a migrated thread and some comments may be shown as answers.
Anatoli
Top achievements
Rank 1
Anatoli asked on 16 Jan 2020, 12:03 PM

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?

1 Answer, 1 is accepted

Sort by
0
Hetali
Telerik team
answered on 16 Jan 2020, 09:51 PM

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  = "(999) 000-00-00-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

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
MaskedTextBox
Asked by
Anatoli
Top achievements
Rank 1
Answers by
Hetali
Telerik team
Share this question
or