The git repo behind my blog.

detecter-lappui-sur-e-en-javascript.html 8.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="HandheldFriendly" content="True" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <meta name="robots" content="index, follow" />
  9. <link href='https://phyks.me/theme/stylesheet/fonts.css' rel='stylesheet' type='text/css'>
  10. <link rel="stylesheet" type="text/css" href="https://phyks.me/theme/stylesheet/style.min.css">
  11. <link rel="stylesheet" type="text/css" href="https://phyks.me/theme/pygments/monokai.min.css">
  12. <link rel="stylesheet" type="text/css" href="https://phyks.me/theme/font-awesome/css/font-awesome.min.css">
  13. <link href="https://phyks.me/feeds/all.atom.xml" type="application/atom+xml" rel="alternate" title="Phyks' blog Atom">
  14. <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
  15. <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
  16. <!-- Chrome, Firefox OS and Opera -->
  17. <meta name="theme-color" content="#333">
  18. <!-- Windows Phone -->
  19. <meta name="msapplication-navbutton-color" content="#333">
  20. <!-- iOS Safari -->
  21. <meta name="apple-mobile-web-app-capable" content="yes">
  22. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  23. <!-- Microsoft EDGE -->
  24. <meta name="msapplication-TileColor" content="#333">
  25. <meta name="author" content="Phyks" />
  26. <meta name="description" content="Pour les besoins d’un plugin pour le thème greeder de Leed (gestion des raccourcis claviers), je devais détecter l’appui sur n’importe quelle touche du clavier en javascript. Pour ce faire, a priori, ce n’est pas très dur, il suffit de surveiller l’événement onkeydown et de …" />
  27. <meta name="keywords" content="">
  28. <meta property="og:site_name" content="Phyks' blog"/>
  29. <meta property="og:title" content="Détecter l’appui sur “é” en javascript"/>
  30. <meta property="og:description" content="Pour les besoins d’un plugin pour le thème greeder de Leed (gestion des raccourcis claviers), je devais détecter l’appui sur n’importe quelle touche du clavier en javascript. Pour ce faire, a priori, ce n’est pas très dur, il suffit de surveiller l’événement onkeydown et de …"/>
  31. <meta property="og:locale" content="en_US.UTF-8"/>
  32. <meta property="og:url" content="https://phyks.me/2013/11/detecter-lappui-sur-e-en-javascript.html"/>
  33. <meta property="og:type" content="article"/>
  34. <meta property="article:published_time" content="2013-11-17 00:40:00+01:00"/>
  35. <meta property="article:modified_time" content=""/>
  36. <meta property="article:author" content="https://phyks.me/author/phyks.html">
  37. <meta property="article:section" content="Dev"/>
  38. <meta property="og:image" content="/images/profile.png">
  39. <title>Phyks' blog &ndash; Détecter l’appui sur “é” en javascript</title>
  40. </head>
  41. <body>
  42. <aside>
  43. <div>
  44. <a href="https://phyks.me">
  45. <img src="/images/profile.png" alt="Phyks" title="Phyks">
  46. </a>
  47. <h1><a href="https://phyks.me">Phyks</a></h1>
  48. <p>I write about dev, FOSS, DIY and more, in French and English.</p>
  49. <ul class="social">
  50. <li><a class="sc-rss" href="feeds/all.atom.xml" target="_blank"><i class="fa fa-rss"></i></a></li>
  51. <li><a class="sc-envelope-o" href="mailto:phyks+blog@phyks.me" target="_blank"><i class="fa fa-envelope-o"></i></a></li>
  52. <li><a class="sc-github" href="http://github.com/phyks/" target="_blank"><i class="fa fa-github"></i></a></li>
  53. <li><a class="sc-gitlab" href="https://git.phyks.me/phyks" target="_blank"><i class="fa fa-gitlab"></i></a></li>
  54. </ul>
  55. </div>
  56. </aside>
  57. <main>
  58. <nav>
  59. <a href="https://phyks.me">Home</a>
  60. <a href="https://links.phyks.me">Bookmarks</a>
  61. <a href="/pages/hosted-tools.html">Tools</a>
  62. <a href="/archives.html">Archives</a>
  63. <a href="/pages/memo-autohebergement.html">Autohébergement</a>
  64. <a href="https://phyks.me/feeds/all.atom.xml">Atom</a>
  65. </nav>
  66. <article class="single">
  67. <header>
  68. <h1 id="detecter-lappui-sur-e-en-javascript">Détecter l&#8217;appui sur &#8220;é&#8221; en&nbsp;javascript</h1>
  69. <p>
  70. Posted on 17 November 2013 in <a href="https://phyks.me/category/dev.html">Dev</a>
  71. &#8226; 2 min read
  72. </p>
  73. </header>
  74. <div>
  75. <p>Pour les besoins d&#8217;un plugin pour le thème
  76. <a href="https://github.com/tmos/greeder">greeder</a> de
  77. <a href="https://github.com/ldleman/Leed">Leed</a> (gestion des raccourcis
  78. claviers), je devais détecter l&#8217;appui sur n&#8217;importe quelle touche du
  79. clavier en javascript. Pour ce faire, a priori, ce n&#8217;est pas très dur,
  80. il suffit de surveiller l&#8217;événement onkeydown et de récupérer le keycode
  81. correspondant. Cette méthode fonctionne sans problèmes sur des claviers
  82. azerty / qwerty (tout du moins pour ce que je voulais faire) mais pose
  83. de graves problèmes sur des dispositions exotiques type Bépo (ty
  84. <a href="http://tomcanac.com/blog/">tmos</a> de me l&#8217;avoir signalé&nbsp;:). En effet,
  85. ces dispositions possèdent de nombreuses touches particulières, qui ne
  86. sont pas traitées par la méthode précédente. Ainsi, il était impossible
  87. d&#8217;assigner un raccourci à la touche &#8220;é&#8221; ou &#8220;É&#8221; par la méthode précédente
  88. (pas de problème sur un clavier azerty/qwerty car cette touche est alors
  89. détectée comme&nbsp;&#8220;2&#8221;).</p>
  90. <p>Après quelques recherches, j&#8217;ai découvert qu&#8217;il existait déjà deux
  91. moyens de savoir quelle touche était pressée&nbsp;: which et keycode. Dans la
  92. majorité des cas, ils fournissent le même résultat, sauf dans le cas
  93. qu&#8217;on veut justement traiter. Je n&#8217;ai pas approfondi la question mais il
  94. semble que which est plus général, et d&#8217;après mes tests, il fonctionne
  95. sur toutes les touches utiles d&#8217;un clavier azerty/qwerty/bépo. Attention
  96. en revanche, les codes renvoyés par which peuvent différer des keycode
  97. pour les caractères&nbsp;exotiques.</p>
  98. <p>Mais cela ne suffisait pas. J&#8217;avais beau utiliser which qui devait me
  99. retourner un certain code de touche, je n&#8217;avais rien. Après quelques
  100. tests, je me suis alors aperçu qu&#8217;il n&#8217;y avait purement et simplement
  101. aucun événement lancé lors de l&#8217;appui sur la touche&nbsp;fautive&#8230;</p>
  102. <p>En effet, il existe encore une fois plusieurs événements disponibles sur
  103. l&#8217;appui d&#8217;une touche. Le plus simple, et le plus naturellement adapté
  104. pour détecter des raccourcis claviers est onkeydown, qui n&#8217;est émis
  105. qu&#8217;une seule fois, lors de l&#8217;appui d&#8217;une touche. Mais cet événement
  106. n&#8217;est pas déclenché lors de l&#8217;appui sur certains caractères spéciaux
  107. (dont é). La solution est alors de faire un code légèrement plus lourd
  108. en utilisant onkeypress en remplacement. onkeypress est déclenché tant
  109. que la touche est appuyée (ce qui veut dire de potentiels événements
  110. multiples, contrairement à onkeydown) mais a le mérite de fonctionner
  111. avec toutes les touches des dispositions&nbsp;azerty/qwerty/bépo.</p>
  112. <p>En résumé, pour détecter un appui sur n&#8217;importe quelle touche du
  113. clavier, il faut utiliser l&#8217;événement onkeypress et détecter le code de
  114. la touche avec which. Cela fonctionnera, en échange d&#8217;une légère baisse
  115. de performances du script. Dommage que ceci n&#8217;ait pas été harmonisé ou
  116. simplifié un&nbsp;minimum&#8230;</p>
  117. </div>
  118. <div class="tag-cloud">
  119. <p>
  120. </p>
  121. </div>
  122. </article>
  123. <footer>
  124. <p>
  125. &copy; 2017 - This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>
  126. </p>
  127. <p>Powered by <a href="http://getpelican.com" target="_blank">Pelican</a> - <a href="https://github.com/alexandrevicenzi/flex" target="_blank">Flex</a> theme by <a href="http://alexandrevicenzi.com" target="_blank">Alexandre Vicenzi</a></p><p>
  128. <a rel="license"
  129. href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
  130. target="_blank">
  131. <img alt="Creative Commons License"
  132. title="Creative Commons License"
  133. style="border-width:0"
  134. src="https://phyks.me/theme/img/cc/by-nc-sa.png"
  135. width="80"
  136. height="15"/>
  137. </a>
  138. </p> </footer>
  139. </main>
  140. <script type="application/ld+json">
  141. {
  142. "@context" : "http://schema.org",
  143. "@type" : "Blog",
  144. "name": " Phyks' blog ",
  145. "url" : "https://phyks.me",
  146. "image": "/images/profile.png",
  147. "description": "I write about dev, FOSS, DIY and more, in French and English."
  148. }
  149. </script>
  150. </body>
  151. </html>