Text-mask: Question: Customize placeholderChar per position

[cargonsan]

Hi all,

I'm trying to put a custom placeholderChar for a date mask.

My mask is in this format:

[/\d/, /\d/, "-", /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/]

And I would like to have the same functionality as with placeholderChar but with different chars per position, something like MM-DD-YYYY

Is it possible or exists any workaround to do it?

P.S.:I tried to do it with pipe, but as I'm newbie in angular 4 I didn't manage to do it

thanks in advance

[adeelibr]

you can just use the placeholder attribute in the input field to do so.

[eyanez1230]

@cargonsan were you able to find a solution? Facing the same problem. @adeelibr the placeholder attribute didn't work. Can you please provide an example? I am doing this in ReactJS

[steveharrison]

It looks like there's already a thread around this (https://github.com/text-mask/text-mask/issues/316) and it is not currently supported. I have the same problem though, and it would be a great feature to have!

[FireCoding]

One possible workaround is to maintain a placeholder element/layer absolutely positioned over the textinput, both with the same monospace font + styling. For example, when the textinput value changes, hide/show placeholder chars as appropriate.

For example:

  // initialize placeholder text
  idealAnniversaryPlaceholderText = 'mm dd yy';
  anniversaryPlaceholderText = this.idealAnniversaryPlaceholderText;

  ...

  updateAnniversary(dateString:string) {
    this.anniversaryText = dateString;
    this.anniversaryPlaceholderText = this.getDatePlaceholderText(this.idealAnniversaryPlaceholderText, '\u00A0\u00A0/\u00A0\u00A0/\u00A0\u00A0', this.anniversaryText);
  }

  getDatePlaceholderText(pristinePlaceholder:string, emptyInputText:string, inputText:string) {
    let outputText = '';
    for (let i = 0; i < inputText.length; i++) {
      outputText += (emptyInputText.charAt(i) === inputText.charAt(i)) ? pristinePlaceholder.charAt(i) : '\u00A0';
    }
    return outputText;
  }

Template:

  <div>{{ anniversaryPlaceholderText }}</div>
  <input type="text"
         [textMask]="{mask: textDateMask, guide: true, placeholderChar: '\u00A0', showMask: true, keepCharPositions: true, pipe: autoCorrectedDatePipe}"
         [ngModel]="getAnniversaryText()"
         (ngModelChange)="updateAnniversary($event)"
  />

Screenshot while editing input:

Tested in Chrome, FF, IE11