模糊不起作用-Angular 2 [英] Blur not working - Angular 2

问题描述

我试图像这样在角度2中设置一个蓝色事件:

I'm trying to set a blue event in angular 2 like so:

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

component.ts:

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()永远不会执行.为什么?

unfocusAreaInput() never gets executed. Why?

推荐答案

您的blur事件不起作用，因为您的div首先无法获得焦点.如果在div中添加tabindex="1"(可以用任何数字替换1)或contentEditable(这将使div的内容可编辑)，它将能够获得焦点，然后blur事件将起作用.另外，您可以使用focus代替click.

Your blur event is not working because your div can't receive focus in the first place. If you add tabindex="1" (1 can be replaced with any number) or contentEditable (this will make div's content editable) to your div, it will be able to receive focus and then blur event will work. Plus, you can then use focus instead of click.

这篇关于模糊不起作用-Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！