2
votes

Angular 2+ comment se concentrer sur les entrées modales lors de l'ouverture du modal?

Dans un composant modal personnalisé que j'ai construit, je souhaite que l'entrée dans le modal soit focalisée chaque fois que le modal est ouvert

J'ai essayé deux approches:

1) Utilisation de ViewChild et ElementRef , puis déclenchement du focus (méthode), sur ouverture modale;

2) Utilisation de la méthode document.getElementByID('test').focus() ;

Aucun d'eux n'a fonctionné

J'ai essayé de tester une autre propriété de document et cela a fonctionné.

document.getElementByID('test').innerHtml = 'test'

mais pas le focus

html simplifié pour le modal:

  @ViewChild('codeInput') codeInput: ElementRef
  @Input() set open(value: boolean) {
    this._open = value;
    if (value) {
     // here is where i need to get focus on the input
        document.getElementByID('test').focus() // did not work
        this.codeInput.nativeElement.focus() // did not work
    }
  }

ts:

<div [class.modal--open]="_open">
  <input #codeInput type="text" id='test'>
</div?

Démo pour tester https://stackblitz.com/edit/angular-2ye3ag


3 commentaires

Vous pouvez simplement utiliser la autofocus au autofocus sur la balise html. Sinon, vous devez vérifier si l'élément est visible ou non, car le focus ne se déclenchera que sur les éléments visibles.


essayez inclus dans setTimeOut: setTimeOut(()=>{this.codeInput.nativeElement.focus()})


n'a pas fonctionné non plus


5 Réponses :


3
votes

Utilisez simplement l'autofocus dans le champ de saisie

<input type="text" name="firstName" autofocus>

Exemple de travail


1 commentaires

l'autofocus ne fonctionne pas dans mon cas, il doit être réglé de manière problématique car ce n'est que lorsque le modal est ouvert, je l'ai essayé et ne fonctionne pas



0
votes

Si vous souhaitez effectuer une mise au point dynamique, vous pouvez utiliser le hook de cycle de vie afterviewInit où, après viewInit, vous définissez le focus à l'aide du moteur de rendu plutôt que des méthodes natives.

Dans votre composant

AfterViewinit() {    
this._renderer.setAttribute(elRef,'focus',true);    
}


6 commentaires

Je pense que cela mettra le focus sur l'entrée tandis que le modal ne s'affichera pas, car le modal s'affiche sur un clic de bouton, donc je veux attacher le focus chaque fois que le modal s'ouvre, c'est pourquoi je le mets dans l'ensemble open ()


Probablement si votre fonction ouverte définie est celle responsable de l'affichage modal, mais je recommanderais l'utilisation du moteur de rendu plutôt que des méthodes natives.


voici ce que j'ai fait et ce que je n'ai pas fonctionné aussi this._renderer.setAttribute(this.codeInput.nativeElement, 'focus', 'true');


true doit être booléen plutôt qu'une chaîne


Essayez d'ajouter l'autofocus d'attribut comme vrai plutôt que comme focus


Pouvez-vous également essayer le hook AfterContentinit LifeCycle, qui sera déclenché une fois la vue initialisée et le contenu récupéré.



1
votes

Vous avez une erreur dans la déclaration de classe modale, corrigez-la et cela fonctionnera

<div  [ngClass]="['modal', style]" [class.modal--open]="_open">
                    ^
<div  [ngClass]="modal" [class.modal--open]="_open">

https://stackblitz.com/edit/angular-zsszxc


1 commentaires

la classe de style est une classe dynamique qui est livrée au modal par une entrée elle ne peut pas être supprimée car elle casse la fonctionnalité modale, cependant votre réponse m'a conduit à la bonne réponse, et je ne peux pas résister à cocher votre réponse et vous donner des points, merci pour votre contribution



0
votes

J'ai compris le problème, la mise au point fonctionne, il faut juste un peu de temps pour se déclencher, j'ai enveloppé la méthode focus() avec un setTimeOut() et cela a fonctionné

    if (value) {
      setTimeout(() => {
        this.codeInput.nativeElement.focus()
      }, 1000)
    }

solution complète https://stackblitz.com/edit/angular-2ye3ag


0 commentaires

0
votes

Pour ceux qui utilisent - ng-Bootstrap

Seulement après avoir appelé la méthode modale open(...) , vous pouvez prendre l'élément par id et appeler la méthode focus()

  public createCustomModal(modalDivElement: any, autoFocusElement?: string)
  {
    let ngbModalRef = this.ngbModalService.open(modalDivElement);
    if (autoFocusElement)
    {
      document.getElementById(autoFocusElement).focus();
    }

    return ngbModalRef;
  }


0 commentaires