path: root/files/es/web/api/keyboardevent/getmodifierstate/index.html

---
title: KeyboardEvent.getModifierState()
slug: Web/API/KeyboardEvent/getModifierState
tags:
  - API
  - DOM
  - KeyboardEvent
  - Referencia
  - getModifierState
  - metodo
translation_of: Web/API/KeyboardEvent/getModifierState
---
<p>{{APIRef("DOM Events")}}</p>

<p>El método <code><strong>KeyboardEvent.getModifierState()</strong></code> retorna <code>true</code> respecto al estado actual de la tecla modificadora especificada si la misma está presionada o bloqueada, en caso contrario devuelve <code>false</code>.</p>

<h2 id="Sintaxis">Sintaxis</h2>

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

<h3 id="Retorna">Retorna</h3>

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

<h3 id="Parámetros">Parámetros</h3>

<dl>
 <dt><em><code>keyArg</code></em></dt>
 <dd>El valor de la tecla modificadora. El valor debe ser uno de los valores {{domxref("KeyboardEvent.key")}} que representan las teclas modificadoras, o el string <code>"Accel"</code> {{deprecated_inline}}, el cual es case-sensitive.</dd>
</dl>

<h2 id="Teclas_modificadoras_en_Internet_Explorer">Teclas modificadoras en Internet Explorer</h2>

<p>IE9 usa <code>"Scroll"</code> para <code>"ScrollLock"</code> y <code>"Win"</code> para <code>"OS"</code>.</p>

<h2 id="Teclas_modificadoras_en_Gecko">Teclas modificadoras en Gecko</h2>

<table style="width: 100%;">
 <caption>When getModifierState() returns true on Gecko?</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 or latter</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row"><code>"Alt"</code></th>
   <td>Either <kbd>Alt</kbd> key or <kbd>AltGr</kbd> key pressed</td>
   <td><kbd>Alt</kbd> key pressed</td>
   <td><kbd>⌥ Option</kbd> key pressed</td>
   <td colspan="2" rowspan="1"><kbd>Alt</kbd> key or <kbd>option</kbd> key pressed</td>
  </tr>
  <tr>
   <th scope="row"><code>"AltGraph"</code></th>
   <td>
    <p>Both <kbd>Alt</kbd> and <kbd>Ctrl</kbd> keys are pressed, or <kbd>AltGr</kbd> key is pressed</p>
   </td>
   <td><kbd>Level 3 Shift</kbd> key (or <kbd>Level 5 Shift</kbd> key {{gecko_minversion_inline("20.0")}}) pressed</td>
   <td><kbd>⌥ Option</kbd> key pressed</td>
   <td colspan="2" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
  </tr>
  <tr>
   <th scope="row"><code>"CapsLock"</code></th>
   <td colspan="3" style="text-align: center;">During LED for <kbd>⇪ Caps Lock</kbd> turned on</td>
   <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Not supported</em></td>
   <td>While <kbd>CapsLock</kbd> is locked {{gecko_minversion_inline("29.0")}}</td>
  </tr>
  <tr>
   <th scope="row"><code>"Control"</code></th>
   <td>Either <kbd>Ctrl</kbd> key or <kbd>AltGr</kbd> key pressed</td>
   <td><kbd>Ctrl</kbd> key pressed</td>
   <td><kbd>control</kbd> key pressed</td>
   <td><kbd>menu</kbd> key pressed.</td>
   <td><kbd>Ctrl</kbd> key, <kbd>control</kbd> key or <kbd>menu</kbd> key pressed.</td>
  </tr>
  <tr>
   <th scope="row"><code>"Fn"</code></th>
   <td colspan="4" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
   <td><kbd>Function</kbd> key is pressed, but we're not sure what key makes the modifier state active. <kbd>Fn</kbd> key on Mac keyboard doesn't cause this active. {{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>Not supported</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>Not supported</em></td>
  </tr>
  <tr>
   <th scope="row"><code>"Meta"</code></th>
   <td style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
   <td style="text-align: center;"><kbd>Meta</kbd> key pressed {{gecko_minversion_inline("17.0")}}</td>
   <td><kbd>⌘ Command</kbd> key pressed</td>
   <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Not supported</em></td>
   <td><kbd>⊞ Windows Logo</kbd> key or <kbd>command</kbd> key pressed</td>
  </tr>
  <tr>
   <th scope="row"><code>"NumLock"</code></th>
   <td colspan="2" style="text-align: center;">During LED for <kbd>Num Lock</kbd> turned on</td>
   <td>A key on numpad pressed</td>
   <td style="text-align: center; background-color: rgb(204, 204, 204);"><em>Not supported</em></td>
   <td>While <kbd>NumLock</kbd> is locked {{gecko_minversion_inline("29.0")}}</td>
  </tr>
  <tr>
   <th scope="row"><code>"OS"</code></th>
   <td><kbd>⊞ Windows Logo</kbd> key pressed</td>
   <td><kbd>Super</kbd> key or <kbd>Hyper</kbd> key pressed (typically, mapped to <kbd>⊞ Windows Logo</kbd> key)</td>
   <td colspan="3" rowspan="1" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
  </tr>
  <tr>
   <th scope="row"><code>"ScrollLock"</code></th>
   <td>During LED for <kbd>Scroll Lock</kbd> turned on</td>
   <td>During LED for <kbd>Scroll Lock</kbd> turned on, but typically this isn't supported by platform</td>
   <td colspan="2" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</em></td>
   <td>While <kbd>ScrollLock</kbd> is locked {{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> key pressed</td>
  </tr>
  <tr>
   <th scope="row"><code>"Super"</code></th>
   <td colspan="5" style="background-color: rgb(204, 204, 204); text-align: center;"><em>Not supported</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>Not supported</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>Not supported</em></td>
  </tr>
 </tbody>
</table>

<ul>
 <li>On the other platforms, "Alt", "Control" and "Shift" may be supported.</li>
 <li>All modifiers (except <code>"FnLock"</code>, <code>"Hyper"</code>, <code>"Super"</code> and <code>"Symbol"</code> which are defined after Gecko implements this) are always supported for untrusted events on Gecko. This doesn't depend on the platform.</li>
</ul>

<h2 id="El_modificador_virtual_Accel"> El modificador virtual <code>"Accel"</code></h2>

<div class="note"><strong>Note:</strong> The <code>"Accel"</code> virtual modifier has been effectively <strong>deprecated</strong> in current drafts of the DOM3 Events specification.</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="Ejemplo">Ejemplo</h2>

<pre class="brush: js">// Ignore if following modifier is active.
if (event.getModifierState("Fn") ||
    event.getModifierState("Hyper") ||
    event.getModifierState("OS") ||
    event.getModifierState("Super") ||
    event.getModifierState("Win") /* hack for IE */) {
  return;
}

// Also ignore if two or more modifiers except Shift are active.
if (event.getModifierState("Control") +
    event.getModifierState("Alt") +
    event.getModifierState("Meta") &gt; 1) {
  return;
}

// Handle shortcut key with standard modifier
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;
}

// Do somethig different for arrow keys if ScrollLock is locked.
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 for IE and old Gecko
      event.preventDefault(); // consume the key event
      break;
    case "ArrowLeft":
    case "Left": // hack for IE and old Gecko
      // Do something different if ScrollLock is locked.
      event.preventDefault(); // consume the key event
      break;
    case "ArrowRight":
    case "Right": // hack for IE and old Gecko
      // Do something different if ScrollLock is locked.
      event.preventDefault(); // consume the key event
      break;
    case "ArrowUp":
    case "Up": // hack for IE and old Gecko
      // Do something different if ScrollLock is locked.
      event.preventDefault(); // consume the key event
      break;
  }
}
</pre>

<div class="note">
<p>Although, this example uses<code> .getModifierState()</code> with <code>"Alt"</code>, <code>"Control"</code>, <code>"Meta"</code> and <code>"Shift"</code>, perhaps it's better for you to use <code>altKey</code>, <code>ctrlKey</code>, <code>metaKey</code> and <code>shiftKey</code> because they are shorter and may be faster.</p>
</div>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificaciones</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events', '#widl-KeyboardEvent-getModifierState', 'getModifierState()')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>Initial 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="Compatibilidad_con_Browsers">Compatibilidad con Browsers</h2>



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

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>The {{domxref("KeyboardEvent")}} this method belongs to.</li>
 <li>{{domxref("MouseEvent.getModifierState")}}</li>
</ul>