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
5 Réponses :
Utilisez simplement l'autofocus dans le champ de saisie
<input type="text" name="firstName" autofocus>
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
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);
}
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é.
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">
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
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
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;
}
Vous pouvez simplement utiliser la
autofocusauautofocussur 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