Déclencher Input type=submit par touche Entrée dans select

Question

Pages :

boteha_2

13 Sep 2017 à 20:41

Bonjour,

Il suffit qu'un imput type=text soit avec son bouton submit dans un form pour que, quand il y a le focus dans l'inpur type=text, appuyer sur la touche Entrée ou équivalent du clavier déclenche la requête ;

<form method="get" action="a.php">
<div><input type="text" name="machin" /><input type="submit" name="ch" value="Ok" /></div>
</form>

<form method="get" action="a.php">
<div><input type="text" name="truc" /><input type="submit" name="ch" value="Ok" /></div>
</form>

Je rentre un texte dans un Input, j'appuie sur Entrée, pas besoin de cliquer sur le submit Ok.

Par contre, avec des SELECT et la même structure cela ne fonctionne pas.

<form method="get" action="h.php">
<p><select name="ssg[J1]">
<option value="tou" selected="selected">34 produits</option>
<option value="*aac">Fiche RCA m&acirc;le</option>
<option value="*aae">Prise RCA femelle, murale ou normale</option>
<option value="*aed">Raccord RCA M/F (coud&eacute;)</option>
etc...
</select><input type="submit" value="&lt; Affiner" /></p>
</form>

<form method="get" action="h.php">
<p><select name="ssg[J4]">
<option value="tou" selected="selected">10 produits</option>
<option value="*ahd">Adaptateur Composite ou SVHS / P&eacute;ritel</option>
<option value="*ahk">Adaptateur S-Vid&eacute;o / Composite</option>
etc...
</select><input type="submit" value="&lt; Affiner" /></p>
</form></td></tr>

Cette fois appuyer sur la touche Entrée ne déclenche rien.
On est obligé de cliquer sur le submit.

S'il existait une solution purement html je serais content.
mais j'ai peur qu'il fasse passer par un soupçon de javascript.

Qu'en pensez-vous ?

Dimtrovich

13 Sep 2017 à 20:53

Je ne voit pas trop comment tu peut faire sa en html pur et simple. Le javascript est utile
Le code ci pourra marché mais suis pas trop sûr


<select name="ssg[J1] onChange="submit()">....</select>

boteha_2

13 Sep 2017 à 21:38

Merci de ta réponse.

Mais à tort ou à raison je ne veux pas que le submit n'active juste sur changement (onChange).

Je veux que l'utilisateur confirme comme actuellement en cliquant sur le submit ou plus facilement avec la touche entrée.

Ca le fait avec type=text, pourquoi pas avec select ?

En html il ne semble pas que tabindex puisse m'aider, je crois qu'en plus c'est déprécié.

GJboba

15 Sep 2017 à 10:13

Ce n'est pas le comportement standard du select de soumettre le formulaire lorsque l'on presse 'Enter' (il ouvre la liste déroulante normalement).
Je ne vois pas comment le faire sans javascript, mais le javascript cela n'est pas forcément compliqué :


<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div>
        <form id='form1' action="suite.html" method="GET" >
            <select id="s1" onkeypress="pressEnter(event);">
                <option value="1">Un</option>
                <option value="2">Deux</option>
            </select>
        </form>
        <script>
            function pressEnter(event) {
                var code=event.which || event.keyCode; //Selon le navigateur c'est which ou keyCode
                if (code==13) { //le code de la touche Enter
                    document.getElementById("form1").submit();
                }
            }
        </script>
    </body>
</html>

boteha_2

15 Sep 2017 à 22:00

Bonjour,

Merci de ta réponse.

Excuse, je suis nul en javascript.
Comment adapter ton code quand il y a plusieurs SELECT sur la même page ?
Il s'agit bien sûr d'activer celui sur lequel l'utilisateur vient d'intervenir.

<form id='form1' action="suite.html" method="GET" >
            <select id="s1" onkeypress="pressEnter(event);">
                <option value="1">Un</option>
                <option value="2">Deux</option>
            </select>
</form>

<form id='form2' action="suite.html" method="GET" >
            <select id="s2" onkeypress="pressEnter(event);">
                <option value="1">Un</option>
                <option value="2">Deux</option>
            </select>
</form>

etc.

Par ailleurs, Entrée provoque l'ouverture du Select dans Chrome mais pas dans FireFox.
Pas essayé sur d'autres navigateurs.
Modifié par boteha_2 (15 Sep 2017 - 22:00)

GJboba

16 Sep 2017 à 02:03

En effet si tous les navigateurs n'ont pas le même comportement tu n'as pas à culpabiliser de le faire à ta manière.
Pour répondre à ta première question je te propose une solution en jQuery plutôt qu'en javascript car je maîtrise mieux ce dernier que javascript (mais c'est possible en javascript aussi) :
jQuery est une API javascript, c'est à dire que derrière c'est du javascript. Ce langage simplifie beaucoup la programmation notamment lorsqu'il s'agit de parcourir les éléments d'une page html. Pour ton problème il s'agit de retrouver le formulaire dans lequel est situé le SELECT pour déclenché l'action submit de celui-ci ...

bref le script ci-dessous le fait très bien :


<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div>TODO write content</div>
        <form id='form1' action="suite.html" method="GET" >
            <select id="s1" >
                <option value="1">Un</option>
                <option value="2">Deux</option>
            </select>
        </form>
        <form id='form2' action="suite2.html" method="POST" >
            <select id="s1" >
                <option value="1">vert</option>
                <option value="2">rouge</option>
            </select>
        </form>
        <script>
            $( document ).ready(function() {
                $(document).on("keypress","select", function(event) {
                    var code=event.which || event.keyCode; //celon le navigateur c'est which ou keyCode
                    if (code===13) { //le code de la touche Enter
                        $(this).parents('form:first').submit();
                    }
                });
            });
        </script>
    </body>
</html>

note: la ligne suivante qui est situé dans le "head" est indispensable pour que le jQuery fonctionne :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Bonne continuation

kustolovic

Modérateur

16 Sep 2017 à 09:37

C'est une très mauvaise idée de faire cela. La touche enter sert plutôt à valider une entrée et refermer le select. Forcer la soumission pose dès lors des problèmes d'accessibilité.

boteha_2

16 Sep 2017 à 12:06

Bonjour,

Merci GJboba pour ton code très propre.

A vrai dire je préférerais du javascript histoire de ne pas dépendre du serveur de Google.
Mais je vais y réfléchir.

Je réfléchis aussi à la remarque de kustolovic.
Tu as peut-être raison.

Actuellement tu es obligé de cliquer sur le bouton submit pour activer le choix du select.
Faire que la touche Entrée active un bouton de type Ok, je ne trouve pas cela affreux, c'est ce qui se passe avec un input type="text".
Mais si c'est contraire au standard Web cela mérite réflexion.

Ce que je trouve affreux c'est de provoquer le submit avec OnChange, c'est pourtant assez répandu.
Modifié par boteha_2 (16 Sep 2017 - 12:08)

GJboba

16 Sep 2017 à 14:29

C'est vrai que cela sort du standard et qu'une meilleur solution ergonomique doit exister à ta problématique, cependant ne connaissant pas exactement le sujet et la finalité de ta page il est difficile de t'aider davantage.
Il y a plein de Cador de l'ergonomie du Web qui consulte le site, tu devrais reformuler ta question (et je la changerai de catégorie) pour avoir un conseil moins technique mais plus ergonomique sur ce qu'il serait bien de faire pour changer cette validation de la page par un Enter sur un "SELECT".
Si tu rendais ta page consultable en ligne se serait le top...

Sinon pour la dépendance au seuveur Google : tu peux récupérer le fichier jquery.min.js de google et le mettre sur ton site et changer l'URL pour y accéder.
exemple: <script src="js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
"js/jquery-ui-1.12.1.custom" est un sous-répertoire de mon site où j'ai copié le fichier jquery-ui.min.js. Et comme cela ta page fonctionne aussi sur un serveur local non connecté à internet.

Pour la solution pure javascript il me faut un peu de temps...

Bonne journée
Modifié par GJboba (16 Sep 2017 - 14:32)

GJboba

16 Sep 2017 à 15:02

En fait la solution pure javascript peut être très simple ! Smiley smile

Mais à force de faire des choses compliquées on a tendance à vouloir compliquer ce qui est simple...


<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>TODO write content</div>
        <form id='form1' action="suite.html" method="GET" >
            <select id="s1" onkeypress="pressEnter(event,'form1')">
                <option value="1">Un</option>
                <option value="2">Deux</option>
            </select>
        </form>
        <form id='form2' action="suite2.html" method="POST" >
            <select id="s1" onkeypress="pressEnter(event,'form2')">
                <option value="1">vert</option>
                <option value="2">rouge</option>
            </select>
        </form>
        <script>
           
            function pressEnter(event,idForm) {
                var code=event.which || event.keyCode; //Selon le navigateur c'est which ou keyCode
                if (code==13) { //le code de la touche Enter
                    document.getElementById(idForm).submit();
                }
            }
        </script>
    </body>
</html>

Bonne journée

boteha_2

16 Sep 2017 à 15:22

Bonjour,

Merci pour ton code javascript.

Je continue à réfléchir à l'ergonomie.
Modifié par boteha_2 (23 Sep 2017 - 21:32)

GJboba

16 Sep 2017 à 16:47

Je vais te donner mon avis sur ce détail ergonomique, tu en feras ce que tu veux :
Je pense qu'il n'est pas utile que tu fasses l'enchaînement direct sur la page suivante lorsque l'utilisateur sélectionne un sous-rayon car il arrive souvent que l'on se trompe en faisant sa sélection dans une combo (ou Select) et revenir à la page précédente pour refaire son choix est ennuyant pour resté poli.
Pour moi tu as juste à changer le terme du bouton "<affiner" par "voir" par exemple...

Bonne continuation

boteha_2

16 Sep 2017 à 17:02

GJboba a écrit :
Je vais te donner mon avis sur ce détail ergonomique, tu en feras ce que tu veux :
Je pense qu'il n'est pas utile que tu fasses l'enchaînement direct sur la page suivante lorsque l'utilisateur sélectionne un sous-rayon car il arrive souvent que l'on se trompe en faisant sa sélection dans une combo (ou Select) et revenir à la page précédente pour refaire son choix est ennuyant pour resté poli.

100 % d'accord mais ce n'est pas ce que fait ton script.
L'utilisateur sélectionne un sous-rayon, puis il confirme son choix, soit en cliquant sur l'input, soit par la touche entrée.
L'ennui est que l'on détourne la touche entrée de son usage standard dans un select qui est d'ouvrir le select.
Cela dit je pense que plein d'utilisateurs essayent d'utiliser la touche entrée pour valider leur choix dans un select.
Le fait que Firefox n'ait pas le comportement standard (il ne fait tien) n'est sans doute pas un hasard.
Bref je continue à réfléchir au truc.

GJboba a écrit :

Pour moi tu as juste à changer le terme du bouton "<affiner" par "voir" par exemple...

Je vais le faire.

GJboba

16 Sep 2017 à 17:17

Oui je me suis trompé sur le comportement du select ...
Ce qu'il est possible de faire c'est de mettre automatiquement le focus sur le bouton "<affine"/"voir", comme cela tu ne détournes pas le fonctionnement du select et en renforçant le focus avec un bon css sur le bouton l'utilisateur comprend bien ce qu'il doit faire (cliquer) et sur se qui va se passer si il fait "entrée"
Modifié par GJboba (16 Sep 2017 - 17:18)

boteha_2

16 Sep 2017 à 17:50

C'est une idée intéressante.

Quand tu mets le focus sur le bouton, que se passe-t-il si l'utilisateur clique sur Entrée ?
Comportement standard (rien ou ouverture/fermeture du Select selon le navigateur) ou exécution du select ?

De toutes façons je vais essayer.

GJboba

16 Sep 2017 à 18:14

Cela dépend du bouton sur lequel tu mets le focus : dans ton cas c'est un bouton de type submit donc lorsque l'utilisateur fera entrée le formulaire sera soumis d'ailleurs c'est le comportement standard des formulaires lorsque qu'un champ est validé par entrée le focus passe au champ suivant jusqu'aux derniers champs qui sont généralement valider et annuler. Comme valider est un bouton de type submit lorsque tu fais entrée ton formulaire est soumis...

boteha_2

16 Sep 2017 à 20:42

Encore merci de tes précisions.

Autrement, rappel de ma nullité en javascript, quel morceau de code ajouter et où ?

Je dirais dans le SELECT :

<form id='form1' action="suite.html" method="GET" >
<p>
<select id="s1" onkeypress="this.form.elements['nom_du_submit'].focus();">
<option value="1">Un</option>
<option value="2">Deux</option>
</select>
<input type="submit" value="Voir" />
</p>
 </form>

1)
Pour l'instant mes submit n'ont pas de nom.
Puis-je les cibler sans ajouter un nom ou id ?
2)
onkeypress ou onchange ?
Modifié par boteha_2 (16 Sep 2017 - 20:44)

GJboba

16 Sep 2017 à 22:15

Je t'ai écris la version la plus simple de code!
C'est du javascript. J'ai ajouté des id sur les input pour simplifier.
Lorsque que la valeur du select change le focus ce fait sur le bouton "voir", à ce moment là si l'utilisateur fait entrée le formulaire est validé!
note: si l'utilisateur manipule la combo mais ne change pas la valeur ou sélectionne la même valeur le focus reste sur le select et il devra cliquer sur le bouton voir pour valider le formulaire!


<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <div>TODO write content</div>
        <form id='form1' action="suite.html" method="GET" >
            <select id="s1" onchange="focusVoir('v1')">
                <option value="1" >Un</option>
                <option value="2" >Deux</option>
            </select>
            <input id="v1" type="submit" value="voir"/>
        </form>
        <form id='form2' action="suite2.html" method="POST" >
            <select id="s1" onchange="focusVoir('v2')">
                <option value="1">vert</option>
                <option value="2">rouge</option>
            </select>
            <input id="v2" type="submit" value="voir"/>
        </form>
        <script>
            
            function focusVoir(idInputSubmit) {
                document.getElementById(idInputSubmit).focus();
            }
           
        </script>
    </body>
</html>

Bonne soirée

boteha_2

17 Sep 2017 à 14:41

Encore merci.

Je dois faire un petit développement PHP pour introduire des id dans les submit mais c'est facile.

Pas moyen d'appeler directement le submit du form ?

onchange="le_submit_de_ce_form.focus()"

Comme il n'y a qu'un seul submit dans le form, pas de risque.

Ou par la valeur du submit .

onchange="input_de_value_Voir.focus()"

Je veux dire en javascript, pas Ajax ou autre ?

boteha_2

17 Sep 2017 à 20:21

Bonjour,

Quelques remarques :
1) Je n'ai pas créé une fonction externe, j'ai tout mis dans le code html :
onchange="document.getElementById('aJ5').focus()"

2) Je déteste me substituer aux styles par défaut des navigateurs.
Donc je n'ai rien ajouté dans le CSS, je laisse le navigateur styler le focus à sa manière.

Cela dit certains navigateurs (dont IE) ne stylent pas le focus, alors que Firefox ou Chrome le font.

Une possibilité :
input[type=submit]:focus {background-color: #E6E6FA}

3) Le résultat est bien celui attendu :
Mettre en valeur le bouton input (sauf sur IE si on n'agit pas au niveau du css).
Rendre la touche Entrée active pour exécuter le Select.

Est-ce que cela pose des problèmes d'accessibilité ou autre ?
Modifié par boteha_2 (23 Sep 2017 - 21:33)

Pages :

Sujet clos

JavaScript, DOM et API Web HTML5

Déclencher Input type=submit par touche Entrée dans select