files/fr/web/api/keyboardevent/charcode/index.html


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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

---
title: KeyboardEvent.charCode
slug: Web/API/KeyboardEvent/charCode
tags:
  - API
  - Clavier
  - DOM
  - Déprécié
  - Propriété
  - Référence(2)
  - évènements
translation_of: Web/API/KeyboardEvent/charCode
---
<p>{{ ApiRef("DOM Events") }}{{non-standard_header}}{{deprecated_header}}</p>

<p>La propriété en lecture seule {{domxref("KeyboardEvent.charCode")}} retourne la valeur Unicode d'une touche caractère pressée pendant un évènement {{ domxref("element.onkeypress", "keypress") }}.</p>

<p>Pour des constantes équivalant ces codes numériques, voir {{ domxref("KeyboardEvent", "KeyEvent") }}.</p>

<div class="note">
<p><strong><code>N'utilisez plus cette propriété, elle est dépréciée.</code></strong></p>

<p>Utilisez plutôt {{domxref("KeyboardEvent.key")}}.</p>
</div>

<h2 id="Syntax" name="Syntax">Syntaxe</h2>

<pre class="syntaxbox"><em>var value</em> = <em>event</em>.charCode;
</pre>

<ul>
 <li><em><code>value</code></em> est la valeur Unicode du caractère associé à la touche pressée.</li>
</ul>

<h2 id="Example" name="Example">Exemple</h2>

<pre class="brush: js">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Exemple charCode&lt;/title&gt;

    &lt;script type="text/javascript"&gt;

      function AfficherCaractere(e)
      {
        alert(
                "Touche tapée : " +
                String.fromCharCode(e.charCode) + "\n" +
                "charCode: " + e.charCode
        );
      }

    &lt;/script&gt;
  &lt;/head&gt;

  &lt;body onkeypress="AfficherCaractere(event);"&gt;
    &lt;p&gt;Tapez une touche caractère de votre clavier (a,b,c...)&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<h2 id="Notes" name="Notes">Notes</h2>

<p>Après un évènement {{ domxref("element.onkeypress", "keypress") }}, la valeur Unicode de la touche pressée est stockée dans l'une ou l'autre des propriétés <code>{{ domxref("event.keyCode", "keyCode") }}</code> et <code>charCode</code>, jamais les deux à la fois. Si la touche pressée génère un caractère (ex. 'a'), <code>charCode</code> prend la valeur du code de ce caractère, en respectant la casse. (i.e. <code>charCode</code> tient compte d'une touche Maj. enfoncée). Sinon, le code est stocké dans <code>keyCode</code>.</p>

<p>Quand une ou plusieurs touche modificatrices sont pressées, il y a quelques règles complexes pour <code>charCode</code>, jetez un oeil à <a href="/en/Gecko_Keypress_Event" title="en/Gecko Keypress Event">Gecko Keypress Event</a> (en anglais) pour le détail.</p>

<p><code>charCode</code> n'est jamais défini lors d'évènements {{ domxref("element.onkeydown", "keydown") }} et {{ domxref("element.onkeyup", "keyup") }}. Dans ces cas, <code>keyCode</code> is set instead.</p>

<p>Pour obtenir le code de la touche qu'il soit stocké dans <code>keyCode</code> ou <code>charCode</code>, requêtez la propriété {{ domxref("event.which", "which") }}.</p>

<p>Les caractères entrés via IME ne s'enregistrent pas sous <code>keyCode</code> ou <code>charCode</code>. <span class="comment">Actually with the Chinese IME I'm using, entering the IME results in a keypress event with keyCode = 229 and no other key events fire until the IME exits (which may happen after multiple characters are inputted). I'm not sure if other IME's work this way.</span></p>

<p>Pour une liste de valeurs de <code>charCode</code> associées à leurs touches, lancez l'exemple dans <a href="/en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Constants" title="en/Gecko_DOM_Reference/Examples#Example_7:_Displaying_Event_Object_Constants">Gecko DOM Reference:Examples #Example 7: Displaying Event Object Constants</a> (en anglais) et regardez le tableau HTML résultant.</p>

<h2 id="Specifications" name="Specifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification (en anglais)</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM3 Events','#widl-KeyboardEvent-charCode','KeyboardEvent.charCode')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>Définition initiale; Déprécié</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>


<p>{{Compat("api.KeyboardEvent.charCode")}}</p>

<div id="compat-desktop"></div>

<div id="compat-mobile"></div>