IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

comme Google : Faire un submit après ENTREE


Sujet :

JavaScript

  1. #1
    Membre régulier
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Points : 121
    Points
    121
    Par défaut comme Google : Faire un submit après ENTREE
    Google, c'est cool, on tape... entrée et hop la recherche est lancée.. sans cliquer sur "rechercher" !

    Le truc bête quoi... sauf que j'arrive pas a faire pareil.

    Par curiosité j'ai regardé le code source de google :

    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
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
     
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Google</title>
    <style>body,td,a,p,.h{font-family:arial,sans-serif}.h{font-size:20px}.h{color:#3366cc}.q{color:#00c}.ts td{padding:0}.ts{border-collapse:collapse}</style>
    <script>
    window.google={kEI:"Yek2R-XEO4-AnQPjr4n9DA",kEXPI:"0",kHL:"fr"};
    function sf(){document.f.q.focus()}
    window.clk=function(b,c,d,e,f,g){if(document.images){var a=encodeURIComponent||escape;(new Image).src="/url?sa=T"+(c?"&oi="+a(c):"")+(d?"&cad="+a(d):"")+"&ct="+a(e)+"&cd="+a(f)+(b?"&url="+a(b.replace(/#.*/,"")).replace(/\+/g,"%2B"):"")+"&ei=Yek2R-XEO4-AnQPjr4n9DA"+g}return true};
    </script>
    </head>
    <body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 onload="sf();if(document.images){new Image().src='/images/nav_logo3.png'}" topmargin=3 marginheight=3>
    <div align=right id=guser style="font-size:84%;padding:0 0 4px" width=100%><nobr>
    <a href="/url?sa=p&pref=ig&pval=3&q=http://www.google.fr/ig%3Fhl%3Dfr&usg=AFQjCNGvPArpBB7iEmR74W3KmfBO6xKdlQ">iGoogle</a> | <a href="https://www.google.com/accounts/Login?continue=http://www.google.fr/&hl=fr">Connexion</a></nobr></div><center><br clear=all id=lgpd>
    <img alt="Google" height=110 src="/intl/fr_fr/images/logo.gif" width=276><br><br>
    <form action="/search" name=f><style>#lgpd{display:none}</style>
    <script defer><!--
    function qs(el){if(window.RegExp&&window.encodeURIComponent){var ue=el.href,qe=encodeURIComponent(document.f.q.value);
    if(ue.indexOf("q=")!=-1){el.href=ue.replace(new RegExp("q=[^&$]*"),"q="+qe);}else{el.href=ue+"&q="+qe;}}return 1;}
    //-->
    </script>
    <table border=0 cellspacing=0 cellpadding=4>
    <tr><td nowrap><font size=-1><b>Web</b>&nbsp;&nbsp;&nbsp;&nbsp;<a class=q href="http://images.google.fr/imghp?oe=UTF-8&hl=fr&tab=wi" onclick="return qs(this)">Images</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class=q href="http://news.google.fr/nwshp?oe=UTF-8&hl=fr&tab=wn" onclick="return qs(this)">Actualités</a>&nbsp;&nbsp;&nbsp;&nbsp;<a class=q href="http://maps.google.fr/maps?oe=UTF-8&hl=fr&tab=wl" onclick="return qs(this)">Maps</a><span style="position:relative;color:red;top:-5px;">Nouveau !</span>&nbsp;&nbsp;&nbsp;&nbsp;<a class=q href="http://groups.google.fr/grphp?oe=UTF-8&hl=fr&tab=wg" onclick="return qs(this)">Groupes</a>&nbsp;&nbsp;&nbsp;&nbsp;<b><a href="/intl/fr/options/" class=q>plus&nbsp;&raquo;</a></b></font></td></tr></table><table cellpadding=0 cellspacing=0><tr valign=top><td width=25%>&nbsp;</td><td align=center nowrap>
    <input name=hl type=hidden value=fr>
    <input maxlength=2048 name=q size=55 title="Recherche Google" value=""><br>
    <input name=btnG type=submit value="Recherche Google">
    <input name=btnI type=submit value="J'ai de la chance"></td><td nowrap width=25%><font size=-2>&nbsp;&nbsp;<a href=/advanced_search?hl=fr>Recherche avancée</a><br>&nbsp;&nbsp;<a href=/preferences?hl=fr>Préférences</a><br>&nbsp;&nbsp;<a href=/language_tools?hl=fr>Outils linguistiques</a></font></td></tr><tr><td align=center colspan=3><font size=-1><span style="text-align:left">Rechercher dans : 
    <input id=all type=radio name=meta value="" checked><label for=all> Web </label>
    <input id=lgr type=radio name=meta value="lr=lang_fr"><label for=lgr> Pages francophones </label>
    <input id=cty type=radio name=meta value="cr=countryFR"><label for=cty> Pages : France </label></span></font></td></tr></table></form><br><br><font size=-1><a href="/intl/fr/ads/">Programmes de publicité</a> - <a href="/services/">Solutions d'entreprise</a> - <a href="/intl/fr/about.html">À propos de Google</a> - <a href=http://www.google.com/ncr>Google.com in English</a><span id=hp style="behavior:url(#default#homepage)"></span><script><!--
    (function() {var a="http://www.google.fr/",b=document.getElementById("hp"),c=b.isHomePage(a);_rptHp=function(){(new Image).src="/gen_204?sa=X&ct=mgyhp&cd="+(b.isHomepage(a)?1:0)};if(!c){document.write('<p><a href=/mgyhp.html onClick=document.getElementById("hp").setHomepage("'+a+'");_rptHp();>Google en page d\x27accueil</a>')};})();//-->
    </script></font><p><font size=-2>&copy;2007 Google</font></p><style>#ietb{behavior:url(#default#userData);display:none;text-align:center;width:310px;position:absolute;top:2px;right:2px;border:1px solid #656565;font-weight:bold;background:#fff;padding:1px 0 4px 4px;font-family:arial}</style><div id=ietb><span id=close><a href=# onclick="return _cltbp()"><img src="images/close_sm.gif" width=12 height=12 border=0 align=right style="padding:2px"></a></span><br><p style=margin-top:15px;text-align:center;font-weight:bold><font size=-1>Découvrez le champ de recherche Google amélioré.</font></p><img src=intl/fr/images/toolbar_sm.png><br>
    <input type=button style=margin-top:12px value="Télécharger la barre d'outils Google" onClick=_dwntbp();><font size=-3><br><br></font></div><script>window._settbp=function(){if(document){var a=document.getElementById("ietb");a.load("IsOnIE7tbPromo");if(a.getAttribute("display")==null){a.style.display="block";(new Image).src="/gen_204?oi=promos_vis&cad=hppwebie7tb:fr&atyp=i"}}};window._cltbp=function(){if(document){var a=document.getElementById("ietb");a.setAttribute("display","none");a.save("IsOnIE7tbPromo");a.style.display="none";(new Image).src="/gen_204?oi=promos&ct=remove&cad=hppwebie7tb:fr&sa=X";return false}};window._dwntbp=function(){if(document){(new Image).src="/gen_204?oi=promos&ct=download&cad=hppwebie7tb:fr&sa=X";document.location="/toolbar/intl/fr/webinstall.html#tbbrand=GZHY&utm_source=fr-hpp-ie7&utm_medium=hpp&utm_campaign=fr"}};_settbp();</script></center>
    </body>
    </html>
    La partie interessante, le champs ou l'on tape la requete :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <input maxlength=2048 name=q size=55 title="Recherche Google" value="">
    Et la balise de formulaire :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <form action="/search" name=f>
    Hormis que l'input ne précise pas son type, rien d'extraordinaire.. y a pas de javascript sur onchange ou autre...

    Bien sur si je fais un copié collé du champs input dans ma page.. ça marche pas "comme sur google"...

    Comment ky font google?
    Comment kon fait ?

    (Parfois je me demande comment l'informatique fait pour rendre compliqué des fonctionnalités aussi basique.)

  2. #2
    Membre du Club
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    89
    Détails du profil
    Informations personnelles :
    Âge : 33
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 89
    Points : 60
    Points
    60
    Par défaut
    euh... dis moi... ton code là, y'a pas la partie php non? et sans la partie php, rien ne se fait^^C'est pas possible en affichant la source d'avoir la partie php...totalement impossible...alors, là t'es cuit^^

    et pour que ça fasse le submit après l'appui sur la touche entrée, faut faire un tabstop, ou sinon faut que tu mette ton bouton en bouton principal activé depuis le début^^

  3. #3
    Membre averti
    Inscrit en
    Novembre 2006
    Messages
    336
    Détails du profil
    Informations forums :
    Inscription : Novembre 2006
    Messages : 336
    Points : 374
    Points
    374
    Par défaut
    Google en php

    Vu que ce n'est pas un submit, ils doivent utiliser un event listener.

    http://www.quirksmode.org/js/introevents.html

    Il suffit d'écouter les frappes de touches sur l'élement window et d'ajouter une callback si le numéro de touche correspond à la touche entrée (13 de mémoire), puis de submit le formulaire.

  4. #4
    Membre régulier
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Points : 121
    Points
    121
    Par défaut
    y a pas de partie serveur executé pour lire ma touche entrée, c'est clair.. coté "event listener", y a rien dans la page...

    Pourtant tout ce passe coté navigateur... Komment ki fon ?

  5. #5
    Membre régulier
    Inscrit en
    Mai 2007
    Messages
    183
    Détails du profil
    Informations forums :
    Inscription : Mai 2007
    Messages : 183
    Points : 121
    Points
    121
    Par défaut
    bon voila la soluce (mais qui n'est pas implémenté comme ça pour google..).

    Mettre dans la balise Form pour tous les champs du formulaire, ou uniquement dans un champ input particulier :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    onkeypress="if(event.keyCode == 13) form.submit();"
    Marche sur ie et firefox.


  6. #6
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 666
    Points
    66 666
    Billets dans le blog
    1
    Par défaut
    ben un form qui a un bouton submit ou image declenche la soumission du fporm sur l'appui de la trouche entrée ...
    en principe pas besoin de plus ...

  7. #7
    Membre régulier Avatar de LeGnome12
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2008
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2008
    Messages : 98
    Points : 109
    Points
    109
    Par défaut Je compend pas tout
    salut gomodo,
    Je cherché des réponse et je suis tombé sur cette discussion qui traite exactement de mon problème. J'ai donc testé ta solution, celle-ci fonctionne très bien sauf qui IE me signale une erreur.
    pourrais-tu m'aider,
    d'avance merci.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    onkeypress="if(event.keyCode == 13) form.submit();"

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 666
    Points
    66 666
    Billets dans le blog
    1
    Par défaut
    LeGnome la réponse est donnée ...
    un input type submit ou image declenchent automatiquement l'envoi du form sans autre code javascript ...

  9. #9
    Membre régulier Avatar de LeGnome12
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2008
    Messages
    98
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mai 2008
    Messages : 98
    Points : 109
    Points
    109
    Par défaut
    Merci de ta réponse, mais en fait j'ai oublier de préciser que j'avais du enlever mon submit pour le remplacer par un href (j'utilise comme lien une image suivi d'un texte)

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 666
    Points
    66 666
    Billets dans le blog
    1
    Par défaut
    ben mets un input type image avec un label for ....

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] faire comme google suggest ?
    Par fraisa1985 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 15/07/2008, 12h04
  2. Probleme lors d'un auto submit apres requette
    Par avogadro dans le forum Langage
    Réponses: 2
    Dernier message: 30/11/2006, 08h39
  3. Faire un submit avec liste de choix
    Par mcdelay dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 04/09/2006, 16h31
  4. Récupérer la valeur du bouton Submit après un contrôle en js
    Par DadaWeb dans le forum Général JavaScript
    Réponses: 12
    Dernier message: 18/01/2006, 12h53
  5. cacher l'aide à la saisie- comme google suggest
    Par hpfx dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 08/11/2005, 11h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo