rss
twitter
  • Showcase
  • Carrières
  • Support
  • GitLab
  • Espace client
  • Contact

Focus sur un champ avec jQuery et setTimeout

5

Pour une raison que j’ignore et que je n’ai pas du tout envie de chercher, un simple focus() refuse de fonctionner.
Voici une solution :

<script type="text/javascript">
    $(function() {
        // doesn't work
        $('#email').focus();
        // works
        setTimeout( function() { $('#email').focus() }, 0 );
    });
</script>

Cherchez pas à comprendre…

Au cas où, le HTML qui va avec :

<form action="/index.php/submissions/login" method="post">
	<fieldset>
		<p>
			<label for="email">E-mail*:</label>
			<input id="email" name="email" value="" type="text">
			<span class="field error"></span>
		</p>
		<p>
			<label for="password">Password*:</label>
			<input id="password" name="password" value="" type="password">
			<span class="field error"></span>
		</p>
	</fieldset>
	<button id="submit" name="submit" class="positive"><img src="/images/icons/lock.png" alt=""> Enter</button>
</form>
DATE 16 Fév 2011
by : Germain
Author / Auteur

Social Share / Partager

    5 Comments
    1. thierrysudfr 18 décembre 2012 at 15 h 17 min Répondre

      Merci pour la combine, j’ai eu le même problème quand le formulaire était affiché avec un fadeIn() ; le temps de l’animation, la fonction focus devait s’exécuter sans succès, le champ n’étant pas complètement affiché…

    2. admin_i 18 décembre 2012 at 15 h 18 min Répondre

      Bonne explication en effet !

    3. tic_le_kiwi 7 janvier 2013 at 12 h 08 min Répondre

      Merci beaucoup pour l’astuce ! Si un jour j’ai la réponse je viendrais te la donner…
      Mais c’est un grand mystère…

    4. pcalame 2 mars 2015 at 15 h 46 min Répondre

      Je vois bien que ça date un peu, mais au cas où

      [code]

      $(document).ready(function() {
      $('#email').focus();
      });

      [/code]

      De cette manière il place le focus que lorsque le champ est chargé, en fait l’ensemble de la page

      • Germain 3 mars 2015 at 11 h 27 min Répondre

        Effectivement tout est plus simple de nos jours, merci pour la précision sur cet article « legacy » 🙂

    Leave a Reply / Répondre Annuler la réponse

    *
    *

    More in Front-end : javascript, jQuery

    • jQuery UI : autocomplete qui "start with" au lieu de "contains"
    • Horaires personnalisés avec wdCalendar
    • jQuery Supersized plugin : load images from a nested list
    • jQuery : vérif checkbox cochée, choix dans liste select
    • jQuery browser version detection quick memo

    Search the blog

    Blog categories

    • Workflow (1)
    • Front-end : HTML, CSS (13)
    • Front-end : javascript, jQuery (33)
    • Back-end : PHP, CMS (42)
    • Back-end : SQL, MySQL (20)
    • Sysadmin : Linux, Apache, GIT (75)
    • Designers : tools, advice (2)
    • Desktop : OS X (37)
    • Desktop : Microsoft (12)
    • Uncategorized (8)

    ITALIC™ Resources

    • Paramètres de connexion au serveur mail
    • Graphistes : séduire un développeur web
    • Dév front : nos bonnes pratiques
    • Mailing : nos (bonnes ?) pratiques
    • Environnement de travail Mac

    Recent posts

    • Autoriser le chargement de contenus mixtes non-https dans Chrome (Mac)
    • Afficher les logs MySQL
    • Recevoir un mail lors de la connexion root à un serveur
    • Changer l’interclassement de plusieurs tables MySQL à la fois (ou presque
    • Maildev : tester l’envoi de mails durant ses développements
    © 2008-2017 ITALIC™ • 8 bis rue Abel • 75012 PARIS • Tel +33 (0)1 48 44 46 35 • RCS PARIS 508 228 772 • Powered by WordPress & GoodLayers
    Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site web.
    Cookie settingsACCEPTER
    Manage consent

    Privacy Overview

    This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
    Necessary
    Toujours activé
    Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
    Non-necessary
    Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
    Enregistrer & appliquer