Skip to content

Instantly share code, notes, and snippets.

@codinronan
Forked from JoeMeeks/InputMask.html
Last active October 26, 2018 23:44
Show Gist options
  • Save codinronan/d6ddfc4ab8dba2277386dbed160b050e to your computer and use it in GitHub Desktop.
Save codinronan/d6ddfc4ab8dba2277386dbed160b050e 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, Host, Self, Optional } from '@angular/core';
import { TextInput } from 'ionic-angular';
@Directive({
selector: '[mask]',
host: {
'(keyup)': 'onInputChange($event)'
}
})
export class InputMask {
pattern: string;
nativeElement: HTMLInputElement;
constructor(
@Attribute('mask') pattern: string,
@Host() @Self() @Optional() public hostInput : TextInput,
) {
this.pattern = pattern;
}
ngAfterViewInit() {
// TODO: Sanity-check that the directive was actually added to an input element.
// It is not valid for anything else.
// console.log('after init: ', this.hostInput._native);
this.nativeElement = this.hostInput._native.nativeElement as HTMLInputElement;
this.updateMask({ target: this.nativeElement });
}
onInputChange(e) {
this.updateMask(e);
}
updateMask(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;
this.hostInput.setValue(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