files/zh-cn/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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

---
title: KeyboardEvent.charCode
slug: Web/API/KeyboardEvent/charCode
tags:
  - API
  - DOM
  - Deprecated
  - KeyboardEvent
  - events
  - 键盘事件
translation_of: Web/API/KeyboardEvent/charCode
---
<p>{{ ApiRef("DOM Events") }}{{non-standard_header}}{{deprecated_header}}</p>

<p>{{domxref("KeyboardEvent.charCode")}} 只读属性，返回 {{ domxref("element.onkeypress", "keypress") }} 事件触发时按下的字符键的字符Unicode值。</p>

<p>与这些数值代码等价的常量，请参考 {{ domxref("KeyboardEvent", "KeyEvent") }}.</p>

<div class="note">
<p><strong>该属性已被废弃，请勿再使用该属性。</strong></p>

<p>请使用 {{domxref("KeyboardEvent.key")}} 取代。</p>
</div>

<h2 id="Syntax" name="Syntax">语法</h2>

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

<ul>
 <li><em><code>value</code></em> 被按下的字符键的字符Unicode值</li>
</ul>

<h2 id="Example" name="Example">示例</h2>

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

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

function showChar(e)
{
alert("Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
      + "charCode: " + e.charCode);
}

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

&lt;body onkeypress="showChar(event);"&gt;
&lt;p&gt;Press any 'character' type key.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

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

<p>在{{ domxref("element.onkeypress", "keypress") }} 事件中, 按键的Unicode值保存在 <code>{{ domxref("event.keyCode", "keyCode") }}</code> 或 <code>{{ domxref("event.charCode", "charCode") }}</code> 属性其中之一, 不会二者同时都有。如果按下的是字符键 (例如 'a'), <code>charCode</code> 被设置为字符的代码值, 并区分大小写。（即 <code>charCode</code> 会考虑 <code>Shift</code> 键是否被按下）。 否则，被按下的键的代码被存储在 <code>keyCode</code> 中。</p>

<p>如果有一个或多个修饰键被按下，有一些复杂的规则来产生 <code>charCode</code> 的值，细节可参考  <a href="/en/Gecko_Keypress_Event" title="en/Gecko Keypress Event">Gecko Keypress 事件</a> 。</p>

<p><code>charCode</code> 用于不会在 {{ domxref("element.onkeydown", "keydown") }} 和 {{ domxref("element.onkeyup", "keyup") }} 事件中被设置。这两种情况下，<code>keyCode</code> 会被设置。</p>

<p>要获取按键代码而不考虑是 <code>keyCode</code> 还是<code>charCode</code>, 请使用 {{ domxref("event.which", "which") }} 属性。</p>

<p>通过输入法输入的字符，不会被设置到注册到通过 <code>keyCode</code> 和 <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>要查看特定按键的 <code>charCode</code> 值的列表，运行这个示例页面 <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> ，然后查看HTML 表格结果。</p>

<h2 id="Specifications" name="Specifications">标准</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM3 Events','#widl-KeyboardEvent-charCode','KeyboardEvent.charCode')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>Initial definition; specified as deprecated</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特性</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>基本支持</td>
   <td>26 (probably earlier)</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>3</td>
   <td>9</td>
   <td>12.1</td>
   <td>5.1 (probably earlier)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特性</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基本支持</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>5.1 (probably earlier)</td>
  </tr>
 </tbody>
</table>
</div>