Skip to content

Instantly share code, notes, and snippets.

@jscarl
Forked from JoeMeeks/InputMask.html
Created September 3, 2018 07:45
Show Gist options
  • Save jscarl/54f630f0398d33f230e39b1c4196a5a4 to your computer and use it in GitHub Desktop.
Save jscarl/54f630f0398d33f230e39b1c4196a5a4 to your computer and use it in GitHub Desktop.
Custom Ionic 2 & 3 Input Mask Directive
<ion-input type="tel" pattern="\d*" placeholder="(xxx) xxx-xxxx" mask="(***) ***-****" [(ngModel)]="phone" name="phone"></ion-input>
<ion-input type="tel" pattern="\d*" placeholder="xxx-xx-xxxx" mask="***-**-****" [(ngModel)]="ssn" name="ssn"></ion-input>
import { Directive, Attribute } from '@angular/core';
@Directive({
selector: '[mask]',
host: {
'(keyup)': 'onInputChange($event)'
}
})
export class InputMask {
pattern: string;
constructor(
@Attribute('mask') pattern: string
) {
this.pattern = pattern;
}
onInputChange(e) {
try {
let value = e.target.value,
caret = e.target.selectionStart,
pattern = this.pattern,
reserve = pattern.replace(/\*/, 'g'),
applied = '',
ordinal = 0;
if (e.keyCode === 8 || e.key === 'Backspace' || e.keyCode === 46 || e.key === 'Delete') {
if (value.length) {
//remove all trailing formatting
while (value.length && pattern[value.length] && pattern[value.length] !== '*') {
value = value.substring(0, value.length - 1);
}
//remove all leading formatting to restore placeholder
if (pattern.substring(0, value.length).indexOf('*') < 0) {
value = value.substring(0, value.length - 1);
}
}
}
//apply mask characters
for (var i = 0; i < value.length; i++) {
//enforce pattern limit
if (i < pattern.length) {
//match mask
if (value[i] === pattern[ordinal]) {
applied += value[i];
ordinal++;
} else if (reserve.indexOf(value[i]) > -1) {
//skip other reserved characters
} else {
//apply leading formatting
while (ordinal < pattern.length && pattern[ordinal] !== '*') {
applied += pattern[ordinal];
ordinal++;
}
applied += value[i];
ordinal++;
//apply trailing formatting
while (ordinal < pattern.length && pattern[ordinal] !== '*') {
applied += pattern[ordinal];
ordinal++;
}
}
}
}
e.target.value = applied;
if (caret < value.length) {
e.target.setSelectionRange(caret, caret);
}
} catch (ex) {
console.error(ex.message);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment