How can I add PlaceHolder for MaskedTextBox?

2 posts, 0 answers
  1. Purna
    Purna avatar
    19 posts
    Member since:
    May 2012

    Posted 16 Jan Link to this post

    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?

  2. Hetali
    Admin
    Hetali avatar
    60 posts

    Posted 16 Jan Link to this post

    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.
Back to Top