web-dev-qa-db-ja.com

ぼかしが機能しない-Angular 2

angular 2のように青いイベントを設定しようとしています：

<div id="area-button" (blur)="unfocusAreaInput()" class="form-group" (click)="focusAreaInput()">

component.ts：

import { Component, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
import { GoogleplaceDirective } from 'angular2-google-map-auto-complete/directives/googleplace.directive';

@Component({
    selector: 'my-area',
    directives: [GoogleplaceDirective],
    templateUrl: 'app/find-page/area-picker.component.html',
    styleUrls: ['app/find-page/area-picker.component.css']
})
export class AreaComponent {
    public address: Object;
    @ViewChild('areaInput') areaInput;
    areaSelected: boolean = false;
    @Output() onAreaSelected = new EventEmitter<boolean>();
    @Output() onAreaDeselected = new EventEmitter<boolean>();

    constructor(el: ElementRef) { }
    getAddress(place: Object) {
        this.address = place['formatted_address'];
        var location = place['geometry']['location'];
        var lat = location.lat();
        var lng = location.lng();
        console.log("Address Object", place);
    }

    focusAreaInput() {
        this.areaInput.nativeElement.focus();
        this.onAreaSelected.emit(true);
    }

        unfocusAreaInput() {
        this.onAreaSelected.emit(false);
    }
}

unfocusAreaInput（）は実行されません。どうして？

angularblur
8
BeniaminoBaggins

blurはそもそもフォーカスを受け取ることができないため、divイベントは機能していません。 tabindex="1"（1は任意の数字に置き換えることができます）またはcontentEditable（これによりdivのコンテンツが編集可能になります）をdivに追加すると、フォーカスを受け取り、その後フォーカスを受け取ることができます。 blurイベントは機能します。さらに、focusの代わりにclickを使用できます。

17
Stefan Svrkota

divで(focusout)="unfocusAreaInput()"を試すこともできます。これは、div内のフォーカス可能な要素がフォーカスを失った場合（要素が削除された場合を含む）、div内の他の要素が同時にフォーカスされない場合に発生します。

div内でフォーカスを失った要素を知りたい場合は、(focusout)="unfocusAreaInput($event.target)"のように渡すことができます。

詳細はこちら： https://developer.mozilla.org/en-US/docs/Web/API/Element/focusout_event

2
Kevin Beal

Tabindexプロパティを使用します。tabindex= "0"を設定すると、フォーカスを取得する際の優先度が最も高くなるため、ぼかしイベントが機能します

1
Ankit Kapoor