Comment puis-je définir le focus à une autre entrée?

J'ai besoin d'être en mesure de passer le focus à un élément d'entrée lorsqu'un certain événement se produit. Comment dois-je faire Angulaire 2?

Par exemple:

<input (keyUp)="processKeyUp($event)"/>
<input (focusme)="alert('i am focused')"/>

Je veux me concentrer la 2ème zone de saisie lorsqu'une touche est enfoncée dans la première. Je pense que j'ai besoin d'utiliser un événement personnalisé (focusme dans l'extrait de code), mais je ne sais pas où et comment déclarer et utiliser un @Directive annotation, ou inclure sa définition dans un composant en quelque sorte. En bref, je suis perplexe.

Mise à JOUR

Oublié de mentionner, je sais que je peux le faire en utilisant les variables locales dans le code html, mais je veux être en mesure de le faire à partir de la composante, et je veux être capable de faire une logique complexe lors de la cuisson de la focusme événement de manière à ce que les contrôles à l'écoute de ce qu'il peut déterminer s'il est signifié pour eux ou pas.
Merci!

  • Vous ne pouvez pas étendre l'élément d'entrée avec un événement personnalisé, vous devez créer votre propre élément qui encapsule un contrôle d'entrée qui peut mettre le feu à la focusme événement, c'est à dire <ma-custom-élément (focusme)="..."/>
  • Ok, comment puis-je définir le focus à l'élément d'entrée à l'intérieur de mon composant personnalisé une fois que je l'événement? Pouvez-vous donner un exemple, dans une réponse?
  • Voir stackoverflow.com/a/34503163/215945 pour un couple de différentes manières/implémentations pour la mise au point sur un autre élément.
InformationsquelleAutor Aviad P. | 2015-07-23
  1. 30

    Vous pouvez le faire simplement en passant la seconde entrée comme une variable à la première

    Par exemple

    HTML

    <!-- We pass focusable as a parameter to the processKeyUp function -->
<input (keyup)="processKeyUp($event, focusable)"/>

<!-- With #focusable we are creating a variable which references to the input -->
<input #focusable />

    Plus tard dans votre js/ts

    @Component({
  selector: 'plunker-app'
})
@View({
  templateUrl: 'main.html'
})
class PlunkerApp {

  constructor() {
  }

  processKeyUp(e, el) {
    if(e.keyCode == 65) { //press A
      el.focus();
    }
  }
}

    el est le cru de l'élément, de sorte que vous pouvez utiliser javascript sur elle.

    Voici un plnkr de sorte que vous pouvez le constater.

    J'espère que cela aide.

    • Merci pour la réponse, mais j'ai besoin de pour le se concentrer pour passer d'un élément d'entrée dans un autre composant, de sorte que l'une des composantes les feux de l'événement, un autre élément agit sur l'événement et définit le focus à un élément d'entrée en son sein.
    • Vous pouvez lire ce fil pendant ce temps github.com/angular/angular/issues/3186
    • si vous voulez inter-composantes de la communication, et des composants ne sont pas "liés" (c'est à dire, pas d'ancêtre ou descendant modèle) vous pouvez mettre un EventEmitter à l'intérieur d'un service, d'injecter le service dans les deux composantes, une composante de déclencher l'événement, et de l'autre composant (celui que vous voulez vous concentrer) abonnez-vous à elle. Voici un exemple.
    • Pour certaines raisons, cette réponse n'a pas fonctionné pour moi (à l'aide de rc.3 dans mon code). J'ai aussi besoin de concentrer l'élément dans le code du composant, et pas seulement à partir d'un événement déclenché dans les DOM, alors la accepté de répondre à partir d'ici était juste ce dont j'avais besoin. Attention aux mises à jour. Ils ont des conseils utiles.
    • Pas de travail pour générées Dynamiquement l'Élément d'Entrée...
    • Les œuvres merveilleuses de validation dans une entrée (forme réactive) et cleaveJS

    InformationsquelleAutor Eric Martinez
  2. 19

    Pour la manipulation sur les éléments DOM toujours essayer d'utiliser les Directives. Dans ce cas, vous êtes capable d'écrire de la directive simple.

    Pour accéder au DOM de la directive, nous pouvons injecter de référence de notre hôte élément du DOM par le ElementRef dans la directive constructeur.

    constructor(@Inject(ElementRef) private element: ElementRef) {}

    Pour la détection de changement de lier la valeur que nous pouvons utiliser ngOnChanges livecycle méthode.

    protected ngOnChanges() {}

    Tous les autres trucs, c'est simple.

    Solution Simple

    //Simple 'focus' Directive
import {Directive, Input, ElementRef} from 'angular2/core';
@Directive({
    selector: '[focus]'
})
class FocusDirective {
    @Input()
    focus:boolean;
    constructor(@Inject(ElementRef) private element: ElementRef) {}
    protected ngOnChanges() {
        this.element.nativeElement.focus();
    }
}

//Usage
@Component({
    selector : 'app',
    template : `
        <input [focus]="inputFocused" type="text">
        <button (click)="moveFocus()">Move Focus</button>
    `,
    directives: [FocusDirective]
})
export class App {
    private inputFocused = false;
    moveFocus() {
        this.inputFocused = true;
        //we need this because nothing will 
        //happens on next method call, 
        //ngOnChanges in directive is only called if value is changed,
        //so we have to reset this value in async way,
        //this is ugly but works
        setTimeout(() => {this.inputFocused = false});
    }
}

    Solution avec EventEmitter

    À résoudre le problème avec setTimeout(() => {cette.inputFocused = false}); Nous pouvons lier à notre directive sur les événements de la source - EventEmitter, ou Observables. Ci-dessous est un exemple de EventEmitter utilisation.

    //Directive
import {Directive, EventEmitter, Input, ElementRef} from 'angular2/core';

@Directive({
    selector: '[focus]'
})
class FocusDirective {
    private focusEmitterSubscription;   
    //Now we expect EventEmitter as binded value
    @Input('focus')
    set focus(focusEmitter: EventEmitter) {
        if(this.focusEmitterSubscription) {
            this.focusEmitterSubscription.unsubscribe();
        }
        this.focusEmitterSubscription = focusEmitter.subscribe(
            (()=> this.element.nativeElement.focus()).bind(this))
    }    
    constructor(@Inject(ElementRef) private element: ElementRef) {}
}

//Usage
@Component({
    selector : 'app',
    template : `
        <input [focus]="inputFocused" type="text">
        <button (click)="moveFocus()">Move Focus</button>
    `,
    directives: [FocusDirective]
})
class App {
    private inputFocused = new EventEmitter();
    moveFocus() {
        this.inputFocused.emit(null);    
    }
}

    Deux solutions pour résoudre le problème, mais la deuxième est un peu mieux les performances et ressemble plus belle.

    • Cette réponse semble étonnamment similaire à ma récente réponse -- un peu trop semblable, je dirais. Je vous suggère de prendre un coup d'oeil à ma réponse encore une fois. Mise à jour 2 et 3 fournissent d'autres implémentations (que j'aime de mieux en mieux).
    • Désolé Marque je n'ai pas remarqué votre réponse en commentaire. La première solution est exactement le même que dans votre entrée. J'aime aussi votre solution avec @ViewChild, mais dans certains cas (par exemple. l'imbrication inconnue composants) directive/Événement émetteur solution est plus souple. Dépend du cas d'utilisation je voir la chambre pour chaque solution.
    • Intéressant de noter que toute Directive qui s'abonne à des observables devrait être un bon citoyen et de désabonnement dans le ngOnDestroy cycle de vie du crochet.
    InformationsquelleAutor majo
  3. 10

    Fait, vous n'avez pas besoin d'écrire de TS code (je suis en utilisant l'un de l'autre, la réponse de l'exemple):

    <input (keyup.enter)="focusable.focus()"/>
<input #focusable />
    InformationsquelleAutor ahu
  4. 4

    Focus - Angulaire 2/5

    <input type="text" [(ngModel)]="term2" #inputBox>

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styleUrls: ['./general.component.scss']
})
export class GeneralComponent {

  @ViewChild("inputBox") _el: ElementRef;

  setFocus() {
    this._el.nativeElement.focus();
  }
}

    Pour la mise au point sur la charge 

    ngAfterViewInit() {
    this._el.nativeElement.focus();
  }

    Vous pouvez mettre à jour cette logique en conséquence pour les clés de la presse.

    Plus D'Infos

    InformationsquelleAutor Prashobh