aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/api/keyboardevent/getmodifierstate/index.html
blob: 68b22ee101266cac8f87155eeccb2f1e2f4ea327 (plain)
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
---
title: KeyboardEvent.getModifierState()
slug: Web/API/KeyboardEvent/getModifierState
translation_of: Web/API/KeyboardEvent/getModifierState
---
<p>{{APIRef("DOM Events")}}</p>

<p>Die Methode <code><strong>KeyboardEvent.getModifierState()</strong></code> gibt den aktuellen Zustand des angegebenen Modifikators zurück: <code>true</code>, wenn der Modifikator aktiv ist (d.h. die Modifikationstasten gedrückt oder gesperrt ist), ansonsten <code>false</code>.</p>

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

<pre class="syntaxbox">var <code><em>active</em> = <em>event</em>.getModifierState(<em>keyArg</em>);</code></pre>

<h3 id="Rückgabe">Rückgabe </h3>

<p>Einen {{jsxref("Boolean")}}</p>

<h3 id="Parameter">Parameter</h3>

<dl>
 <dt><em><code>keyArg</code></em></dt>
 <dd>Ein Modifikatorschlüsselwert. Der Wert muss einer der {{domxref("KeyboardEvent.key")}} Werte sein, die Modifikatorschlüssel darstellen, oder die Zeichenkette "Accel" {{deprecated_inline}}. Dabei wird zwischen Groß- und Kleinschreibung unterschieden.</dd>
</dl>

<h2 id="Modifikationstasten_im_Internet_Explorer">Modifikationstasten im Internet Explorer</h2>

<p>IE9 verwendet <code>"Scroll"</code> für <code>"ScrollLock"</code> und <code>"Win"</code> für <code>"OS"</code>.</p>

<h2 id="Modifikationstasten_in_Gecko">Modifikationstasten in Gecko</h2>

<table style="width: 100%;">
 <caption>Wann gibt getModifierState() bei Gecko true zurück?</caption>
 <thead>
  <tr>
   <th scope="row"> </th>
   <th scope="col">Windows</th>
   <th scope="col">Linux (GTK)</th>
   <th scope="col">Mac</th>
   <th scope="col">Android 2.3</th>
   <th scope="col">Android 3.0 und später</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row"><code>"Alt"</code></th>
   <td>Entweder die <kbd>Alt</kbd> oder <kbd>AltGr</kbd> -Taste gedrückt wird</td>
   <td><kbd>Alt</kbd> -Taste gedrückt wird</td>
   <td><kbd>⌥ Option</kbd> -Taste gedrückt wird</td>
   <td colspan="2" rowspan="1"><kbd>Alt</kbd>  oder  <kbd>option</kbd> -Taste gedrückt wird</td>
  </tr>
  <tr>
   <th scope="row"><code>"AltGraph"</code></th>
   <td>
    <p>Sowohl die <kbd>Alt</kbd> als auch die <kbd>Strg</kbd>  werden gedrückt, oder die <kbd>AltGr</kbd> Taste wird gedrückt</p>
   </td>
   <td><kbd>Level 3 Shift</kbd> Taste (or <kbd>Level 5 Shift</kbd> Taste {{gecko_minversion_inline("20.0")}}) wird gedrückt</td>
   <td><kbd>⌥ Option</kbd> Taste wird gedrückt</td>
   <td colspan="2" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
  </tr>
  <tr>
   <th scope="row"><code>"CapsLock"</code></th>
   <td colspan="3" style="text-align: center;">Während die LED für <kbd>⇪ Caps Lock</kbd> leuchtet</td>
   <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Nicht unterstützt</em></td>
   <td>Solange <kbd>⇪ Caps Lock</kbd> gesperrt ist {{gecko_minversion_inline("29.0")}}</td>
  </tr>
  <tr>
   <th scope="row"><code>"Control"</code></th>
   <td>Entweder die <kbd>Strg</kbd>  oder <kbd>AltGr</kbd> -Taste wird gedrückt</td>
   <td><kbd>Strg</kbd> Taste wird gedrückt</td>
   <td><kbd>control</kbd> Taste wird gedrückt</td>
   <td><kbd>menu</kbd> Taste wird gedrückt.</td>
   <td><kbd>Strg</kbd>, <kbd>control</kbd>  oder <kbd>menu</kbd> Taste wird gedrückt.</td>
  </tr>
  <tr>
   <th scope="row"><code>"Fn"</code></th>
   <td colspan="4" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
   <td>Die <kbd>Function</kbd> wird gedrückt, aber wir sind nicht sicher, welche Taste den Modifikatorstatus aktiv setzt. Die <kbd>Fn</kbd>-Taste auf der Mac-Tastatur bewirkt dies nicht.<br>
    {{gecko_minversion_inline("29.0")}}</td>
  </tr>
  <tr>
   <th scope="row"><code>"FnLock"</code></th>
   <td colspan="5" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
  </tr>
  <tr>
   <th scope="row"><code>"Hyper"</code></th>
   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
  </tr>
  <tr>
   <th scope="row"><code>"Meta"</code></th>
   <td style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
   <td style="text-align: center;"><kbd>Meta</kbd> Taste wird gedrückt {{gecko_minversion_inline("17.0")}}</td>
   <td><kbd>⌘ Command</kbd> Taste wird gedrückt</td>
   <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Nicht unterstützt</em></td>
   <td><kbd>⊞ Windows Logo</kbd>  or <kbd>command</kbd> Taste gedrückt wird</td>
  </tr>
  <tr>
   <th scope="row"><code>"NumLock"</code></th>
   <td colspan="2" style="text-align: center;">Während die LED für <kbd>Num Lock</kbd> leuchtet</td>
   <td>Eine Taste auf dem Nummerblock gedrückt wird</td>
   <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Nicht unterstützt</em></td>
   <td>Solange <kbd>NumLock</kbd> gesperrt ist {{gecko_minversion_inline("29.0")}}</td>
  </tr>
  <tr>
   <th scope="row"><code>"OS"</code></th>
   <td><kbd>⊞ Windows Logo</kbd> Taste wird gedrückt</td>
   <td><kbd>Super</kbd> or <kbd>Hyper</kbd> Taste wird gedrückt (normalerweise auf der <kbd>⊞ Windows Logo</kbd> Taste zugeordnet)</td>
   <td colspan="3" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
  </tr>
  <tr>
   <th scope="row"><code>"ScrollLock"</code></th>
   <td>Während die LED für <kbd>ScrollLock</kbd> leuchtet</td>
   <td>Während die LED für <kbd>ScrollLock</kbd> leuchtet, aber normalerweise wird dies von der Plattform nicht unterstützt </td>
   <td colspan="2" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
   <td>Solange <kbd>ScrollLock</kbd> gesperrt {{gecko_minversion_inline("29.0")}}</td>
  </tr>
  <tr>
   <th scope="row"><code>"Shift"</code></th>
   <td colspan="5" rowspan="1" style="text-align: center;"><kbd>⇧ Shift</kbd> Taste wird gedrückt</td>
  </tr>
  <tr>
   <th scope="row"><code>"Super"</code></th>
   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
  </tr>
  <tr>
   <th scope="row"><code>"Symbol"</code></th>
   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
  </tr>
  <tr>
   <th scope="row"><code>"SymbolLock"</code></th>
   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Nicht unterstützt</em></td>
  </tr>
 </tbody>
</table>

<ul>
 <li>Auf den anderen Plattformen werden <kbd>Alt</kbd>, <kbd>Control</kbd> und <kbd>Shift</kbd> unterstützt werden.</li>
 <li>Alle Modifikatoren (außer "FnLock", "Hyper", "Super" und "Symbol", die nach der Implementierung von Gecko definiert werden) stehen immer für nicht vertrauenswürdige Ereignisse auf Gecko zur Verfügung. Das hängt nicht von der Plattform ab.</li>
</ul>

<h2 id="Accel_virtueller_Modifikator"><code>"Accel"</code> virtueller Modifikator</h2>

<div class="note"><strong>Notiz</strong><strong>:</strong> Der virtuelle Modifikator <code>"Accel"</code> ist in den aktuellen Entwürfen der DOM3 Events-Spezifikation praktisch <strong>veraltet</strong>.</div>

<p><code>getModifierState()</code> also accepts a deprecated virtual modifier named <code>"Accel"</code>. <code>event.getModifierState("Accel")</code> returns <code>true</code> when at least one of {{domxref("KeyboardEvent.ctrlKey")}} or {{domxref("KeyboardEvent.metaKey")}} is <code>true</code>.</p>

<p>In old implementations and outdated specifications, it returned <code>true</code> when a modifier which is the typical modifier key for the shortcut key is pressed. For example, on Windows, pressing <kbd>Ctrl</kbd> key may make it return <code>true</code>. However, on Mac, pressing <kbd>⌘ Command</kbd> key may make it return <code>true</code>. Note that which modifier key makes it return true depends on platforms, browsers, and user settings. For example, Firefox users can customize this with a pref, <code>"ui.key.accelKey"</code>.</p>

<h2 id="Beispiel">Beispiel</h2>

<pre class="brush: js">// Ignorieren, wenn folgender Modifikator aktiv ist.
if (event.getModifierState("Fn") ||
    event.getModifierState("Hyper") ||
    event.getModifierState("OS") ||
    event.getModifierState("Super") ||
    event.getModifierState("Win") /* hack for IE */) {
  return;
}

// auch ignorieren, wenn zwei oder mehr Modifikatoren außer Shift aktiv sind.
if (event.getModifierState("Control") +
    event.getModifierState("Alt") +
    event.getModifierState("Meta") &gt; 1) {
  return;
}

// Tastaturkürzel mit Standardmodifikator
if (event.getModifierState("Accel")) {
  switch (event.key.toLowerCase()) {
    case "c":
      if (event.getModifierState("Shift")) {
        // Handle Accel + Shift + C
        event.preventDefault(); // consume the key event
      }
      break;
    case "k":
      if (!event.getModifierState("Shift")) {
        // Handle Accel + K
        event.preventDefault(); // consume the key event
      }
      break;
  }
  return;
}

// Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
if ((event.getModifierState("ScrollLock") ||
       event.getModifierState("Scroll") /* hack for IE */) &amp;&amp;
    !event.getModifierState("Control") &amp;&amp;
    !event.getModifierState("Alt") &amp;&amp;
    !event.getModifierState("Meta")) {
  switch (event.key) {
    case "ArrowDown":
    case "Down": // Hack für IE und älteren Gecko
      event.preventDefault(); // Schlüsselereignis verwenden
      break;
    case "ArrowLeft":
    case "Left": // Hack für IE und älteren Gecko
      // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
      event.preventDefault(); // Schlüsselereignis verwenden
      break;
    case "ArrowRight":
    case "Right": // Hack für IE und älteren Gecko
      // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
      event.preventDefault(); // Schlüsselereignis verwenden
      break;
    case "ArrowUp":
    case "Up": // Hack für IE und älteren Gecko
      // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
      event.preventDefault(); // Schlüsselereignis verwenden
      break;
  }
}
</pre>

<div class="note">
<p>Obwohl dieses Beispiel <code>.getModifierState()</code> mit <code>"Alt"</code>, <code>"Control"</code>, <code>"Meta"</code> und <code>"Shift"</code> verwendet, ist es vielleicht besser, <code>altKey</code>, <code>ctrlKey</code>, <code>metaKey</code> und <code>shiftKey</code> zu verwenden, da sie kürzer und vielleicht schneller sind.</p>
</div>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events', '#widl-KeyboardEvent-getModifierState', 'getModifierState()')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>Initiale Definition (<a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3Events-key.html#keys-modifier">Modifier Keys spec</a>)</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>

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

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>Das {{domxref("KeyboardEvent")}}, zu dem die Methode gehört.</li>
 <li>{{domxref("MouseEvent.getModifierState")}}</li>
</ul>