fix(input): add event emitters for blur and focus to the ion-input component

fixes #5487
This commit is contained in:
Brandy Carney
2016-03-16 12:46:27 -04:00
parent 904775430b
commit 3e88fe9f31
4 changed files with 56 additions and 10 deletions

View File

@ -1,4 +1,4 @@
import {Component, Optional, ElementRef} from 'angular2/core';
import {Component, Optional, ElementRef, ViewChild} from 'angular2/core';
import {NgIf, NgControl} from 'angular2/common';
import {Button} from '../button/button';
@ -65,7 +65,7 @@ import {Platform} from '../../platform/platform';
@Component({
selector: 'ion-input',
template:
'<input [type]="type" [(ngModel)]="_value" [placeholder]="placeholder" class="text-input">' +
'<input [type]="type" [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input">' +
'<input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">' +
'<button clear *ngIf="clearInput && value" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>' +
'<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
@ -90,6 +90,20 @@ export class TextInput extends InputBase {
) {
super(config, form, item, app, platform, elementRef, scrollView, nav, ngControl);
}
/**
* @private
*/
inputBlurred(event) {
this.blur.emit(event);
}
/**
* @private
*/
inputFocused(event) {
this.focus.emit(event);
}
}
@ -134,7 +148,7 @@ export class TextInput extends InputBase {
@Component({
selector: 'ion-textarea',
template:
'<textarea [(ngModel)]="_value" [placeholder]="placeholder" class="text-input"></textarea>' +
'<textarea [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input"></textarea>' +
'<input type="text" aria-hidden="true" next-input *ngIf="_useAssist">' +
'<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
directives: [
@ -167,4 +181,18 @@ export class TextArea extends InputBase {
this._item.setCssClass('item-textarea', true);
}
}
/**
* @private
*/
inputBlurred(event) {
this.blur.emit(event);
}
/**
* @private
*/
inputFocused(event) {
this.focus.emit(event);
}
}