Discussion :

[Papy214]

Bonjour

Je m'essaye à js + jQuery depuis quelques jours et en tant que nouvel utilisateur, j'espère un peu d'indulgence de votre part si je pose des questions peu pertinentes aux habitués que vous êtes.

J'ai 2 "input" texte A et B sur ma page.
Quand l'utilisateur appuie sur entrée ou tabulation sur le A, le focus passe au B (logique jusque là).
Je voudrais "annuler" le passage à B si A n'est pas rempli.
J'ai trouvé pour ça focusout ou blur et j'ai essayé plusieurs solutions piochées sur le net mais ne fonctionne.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
    $("#target").blur(function (event) {
        var s = ($(this).val()).trim();
        alert(s);  // pour vérifier que je passe bien ici
 
        if( s === '' ){            
            alert('vide');  // pour vérifier que je passe bien ici
            setTimeout(event.stopImmediatePropagation(), 1);
            return false;            
        };
    });

En fait, je ne sais pas si ce que je veux faire est possible.
Donc,est-ce que je dois chercher encore ou bien ma recherche est-elle vaine et se terminera forcément sur une impossibilité ?

[Invité]

Bonjour,

Ici, aucune pitié... (non, je rigole... )

1- Le code JS n'a d'intérêt qu'AVEC le code HTML associé.

2- Quand on débute, on EVITE de réinventer la roue, ou de "bricoler" des trucs farfelus.
DONC : on commence par des exercices CLASSIQUES, et simples !

3- Déjà, on va attendre que le DOM soit prêt :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(function(){ // équivalent à $(document).ready(function() {
 
   // ... (ici, le script)
 
});

[NoSmoking]

Bonjour,
il me semble souhaitable de changer ton approche, que se passe t-il si l'on quitte l'<input> A sans rien saisir ... on ne peut plus rien faire !

Je verrais plus quelque chose comme, quand l'<input> B prend le focus alors on teste si l'<input> A est vide et si c'est le cas on lui donne le focus.

[Papy214]

aïe, pas sur la tête

Oui oui ... j'ai bien mis ce bout de code dans $(document).ready(function () {}
C'est juste que je ne voulais pas surcharger inutilement le thread.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function () {
 
    $("#target").blur(function (event) {
        var s = ($(this).val()).trim();
        alert(s);  // pour vérifier que je passe bien ici
 
        if( s === '' ){            
            alert('vide');  // pour vérifier que je passe bien ici
            setTimeout(event.stopImmediatePropagation(), 1);
            return false;            
        };
    });    
 
 
});

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
        <form>
            <input id="target" type="text" value="Field 1">
            <input type="text" value="Field 2">
        </form>

[Papy214]

Bonjour,
il me semble souhaitable de changer ton approche, que se passe t-il si l'on quitte l'<input> A sans rien saisir ... on ne peut plus rien faire !

Je verrais plus quelque chose comme, quand l'<input> B prend le focus alors on teste si l'<input> A est vide et si c'est le cas on lui donne le focus.

Dans le sens inverse, j'aurais dû y penser.
Je précise que j'en suis à faire des essais au fil de ma curiosité en vue d'apprendre, et que le but final n'est pas de faire un site (en tous cas pour le moment).
Donc, cette solution sera retenue, même si mon besoin de connaissances dans ce domaine ne m’empêchera pas de savoir si ma question originale peut avoir une réponse

Merci pour l'idée qui me servira forcément un jour.

[Invité]

1- Comme je l'ai dit, le mieux est de commencer avec du "classique".
Comme :

• vérifier les données à la soumission du formulaire
• récupérer la valeur d'un select ou checkbox pour effectuer une action selon condition
• ...

Je ne pense pas que vouloir "bloquer le focus" soit très... ergonomique ni recommandé : ça risque surtout d'être "pénible" pour l'utilisateur.


2- Pour les champs obligatoires, il existe en HTML l'attribut required :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" .... required="required" />

Il existe ainsi un tas d'autres attributs et types, avant d'envisager un contrôle en JS/jQuery (l'un n'empêchant pas l'autre, évidemment).

[NoSmoking]

... si mon besoin de connaissances dans ce domaine ne m’empêchera pas de savoir si ma question originale peut avoir une réponse

Outre le fait que tu risques de tourner en rond l'événement blur ne se propage pas donc on ne peut pas stopper la propagation, il vaut mieux dans ce cas utiliser l'événement focusout

Ressources :
↪

• Element: blur event
• Element: focusout event

[Papy214]

Bien ... bloquer le focus ne semble pas la solution idéale.

Je vais donc utiliser la méthode consistant à donner le focus à A sur la prise de focus par B.

Pour la différence entre blur et focusout, je vais étudier ça de près.

Merci de vos conseils à tous les deux