{"id":81668,"date":"2022-09-11T17:09:39","date_gmt":"2022-09-11T15:09:39","guid":{"rendered":"https:\/\/rmarketingdigital.com\/development\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/"},"modified":"2020-09-16T15:05:10","modified_gmt":"2020-09-16T18:05:10","slug":"capturar-claves-con-la-api-de-bloqueo-de-teclado","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/","title":{"rendered":"Capture Keys with the Key Lock API"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#Uso-de-la-API-de-bloqueo-de-teclado\" >Uso de la API de bloqueo de teclado<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#Requisito-previo\" >Requisito previo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#Compatibilidad-del-navegador\" >Compatibilidad del navegador<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#Deteccion-de-caracteristicas\" >Detecci\u00f3n de caracter\u00edsticas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#Bloquear-el-teclado\" >Bloquear el teclado<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#Capturando-todas-las-claves\" >Capturando todas las claves<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#Captura-de-claves-especificas\" >Captura de claves espec\u00edficas<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#Desbloqueo-del-teclado\" >Desbloqueo del teclado<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#Manifestacion\" >Manifestaci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#Consideraciones-de-Seguridad\" >Consideraciones de Seguridad<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#Enlaces-Utiles\" >Enlaces \u00datiles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#Agradecimientos\" >Agradecimientos<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Proporcione una experiencia inmersiva a pantalla completa para una variedad de casos de uso, incluidos sitios web interactivos, juegos y escritorio remoto o transmisi\u00f3n de aplicaciones.\n        <\/p>\n<p>\n          <time>28 de julio de 2020<\/time><\/p>\n<\/header>\n<p>Con m\u00e1s y m\u00e1s usuarios que pasan la mayor parte de su tiempo en el navegador, sitios web, juegos, transmisi\u00f3n de escritorio remoto y transmisi\u00f3n de aplicaciones muy interactivos se esfuerzan por brindar una experiencia de pantalla completa inmersiva.  Para lograr esto, los sitios necesitan acceso a teclas especiales y atajos de teclado mientras est\u00e1n en modo de pantalla completa, para que puedan usarse para navegaci\u00f3n, men\u00fas o funciones de juego.  Algunos ejemplos de las claves que pueden ser necesarias son <kbd>Esc<\/kbd>, <kbd>Alt<\/kbd> + <kbd>Leng\u00fceta<\/kbd>, <kbd>Cmd<\/kbd> + <kbd>'<\/kbd>y <kbd>Ctrl<\/kbd> + <kbd>norte<\/kbd>.<\/p>\n<p>De forma predeterminada, estas claves no est\u00e1n disponibles para la aplicaci\u00f3n web porque son capturadas por el navegador o el sistema operativo subyacente.  La API de bloqueo de teclado permite que los sitios web utilicen todas las teclas disponibles permitidas por el sistema operativo host (consulte Compatibilidad del navegador).<\/p>\n<figure class=\"w-figure\">\n  <img alt='chrome-remote-desktop-1169814' class=\"w-screenshot w-screenshot--filled\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/chrome-remote-desktop-1169814.png' alt=\"Ubuntu Linux se transmiti\u00f3 a una pesta\u00f1a del navegador en macOS Chrome (a\u00fan no se ejecuta en modo de pantalla completa).\"><figcaption>\n<p>    El problema: un escritorio remoto de Ubuntu Linux transmitido <em>no<\/em> funcionando en modo de pantalla completa y <em>sin<\/em> bloqueo de teclado activo, por lo que las teclas del sistema a\u00fan son capturadas por el sistema operativo host macOS y la experiencia es <em>no<\/em> inmersivo todav\u00eda.<br \/>\n  <\/figcaption><\/figure>\n<h2 id=\"using-the-keyboard-lock-api\"><span class=\"ez-toc-section\" id=\"Uso-de-la-API-de-bloqueo-de-teclado\"><\/span>Uso de la API de bloqueo de teclado <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>los <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Keyboard\"><code>Keyboard<\/code>  interfaz<\/a> de la API del teclado proporciona funciones que alternan la captura de pulsaciones de teclas desde el teclado f\u00edsico, as\u00ed como la obtenci\u00f3n de informaci\u00f3n sobre el uso <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Keyboard\/getLayoutMap\">Dise\u00f1o del teclado<\/a>.<\/p>\n<h3 id=\"prerequisite\"><span class=\"ez-toc-section\" id=\"Requisito-previo\"><\/span>Requisito previo <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Hay dos tipos diferentes de pantalla completa disponibles en los navegadores modernos: iniciado por JavaScript a trav\u00e9s del <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fullscreen_API\">API de pantalla completa<\/a> e iniciado por el usuario a trav\u00e9s de un atajo de teclado.  La API Keyboard Lock solo est\u00e1 disponible cuando <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/requestFullscreen\">Pantalla completa iniciada por JavaScript<\/a> est\u00e1 activo.  A continuaci\u00f3n, se muestra un ejemplo de pantalla completa iniciada por JavaScript:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">await<\/span> document<span class=\"token punctuation\">.<\/span>documentElement<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestFullscreen<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"browser-compatibility\"><span class=\"ez-toc-section\" id=\"Compatibilidad-del-navegador\"><\/span>Compatibilidad del navegador <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Puede ver la compatibilidad del navegador en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=mdn-api_keyboard_lock\">Puedo usar<\/a>.  Tenga en cuenta que no todas las claves del sistema se pueden bloquear.  Esto var\u00eda de un sistema operativo a otro.  Por ejemplo, siga <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/crbug.com\/855738\">crbug.com\/855738<\/a> para obtener actualizaciones de progreso en el bloqueo del teclado del sistema para macOS.<\/p>\n<h3 id=\"feature-detection\"><span class=\"ez-toc-section\" id=\"Deteccion-de-caracteristicas\"><\/span>Detecci\u00f3n de caracter\u00edsticas <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Puede utilizar el siguiente patr\u00f3n para comprobar si la API de bloqueo de teclado es compatible:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">'keyboard'<\/span> <span class=\"token keyword\">in<\/span> navigator <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token string\">'lock'<\/span> <span class=\"token keyword\">in<\/span> navigator<span class=\"token punctuation\">.<\/span>keyboard<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"locking-the-keyboard\"><span class=\"ez-toc-section\" id=\"Bloquear-el-teclado\"><\/span>Bloquear el teclado <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>los <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Keyboard\/lock\"><code>lock()<\/code><\/a>  m\u00e9todo del <code>Keyboard<\/code> La interfaz devuelve una promesa despu\u00e9s de habilitar la captura de pulsaciones de teclas para cualquiera o todas las teclas del teclado f\u00edsico.  Este m\u00e9todo solo puede capturar claves a las que el sistema operativo subyacente otorga acceso.  los <code>lock()<\/code> El m\u00e9todo toma una matriz de uno o m\u00e1s c\u00f3digos clave para bloquear.  Si no se proporcionan c\u00f3digos de llave, todas las llaves se bloquear\u00e1n.  Una lista de valores de c\u00f3digos de clave v\u00e1lidos est\u00e1 disponible en el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/uievents-code\/#keyboard-key-codes\">Teclado de eventos de UI Valores de c\u00f3digo de evento<\/a> Especificaciones.<\/p>\n<h4 id=\"capturing-all-keys\"><span class=\"ez-toc-section\" id=\"Capturando-todas-las-claves\"><\/span>Capturando todas las claves <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>El siguiente ejemplo captura todas las pulsaciones de teclas.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">navigator<span class=\"token punctuation\">.<\/span>keyboard<span class=\"token punctuation\">.<\/span><span class=\"token function\">lock<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h4 id=\"capturing-specific-keys\"><span class=\"ez-toc-section\" id=\"Captura-de-claves-especificas\"><\/span>Captura de claves espec\u00edficas <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>El siguiente ejemplo captura la <kbd>W<\/kbd>, <kbd>UNA<\/kbd>, <kbd>S<\/kbd>y <kbd>re<\/kbd> llaves.  Captura estas teclas independientemente de los modificadores que se utilicen con la pulsaci\u00f3n de la tecla.  Asumiendo un dise\u00f1o QWERTY de EE. UU., Registrarse <code>\"KeyW\"<\/code> asegura que <kbd>W<\/kbd>, <kbd>Cambio<\/kbd> + <kbd>W<\/kbd>, <kbd>Controlar<\/kbd> + <kbd>W<\/kbd>, <kbd>Controlar<\/kbd> + <kbd>Cambio<\/kbd> + <kbd>W<\/kbd>y todas las dem\u00e1s combinaciones de modificadores de teclas con <kbd>W<\/kbd> se env\u00edan a la aplicaci\u00f3n.  Lo mismo se aplica a <code>\"KeyA\"<\/code>, <code>\"KeyS\"<\/code>y <code>\"KeyD\"<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">await<\/span> navigator<span class=\"token punctuation\">.<\/span>keyboard<span class=\"token punctuation\">.<\/span><span class=\"token function\">lock<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">[<\/span><br><span class=\"token string\">\"KeyW\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token string\">\"KeyA\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token string\">\"KeyS\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token string\">\"KeyD\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Puede responder a las pulsaciones de teclas capturadas mediante eventos de teclado.  Por ejemplo, este c\u00f3digo usa el <code>onkeydown<\/code> evento:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">document<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'keydown'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">e<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>e<span class=\"token punctuation\">.<\/span>code <span class=\"token operator\">===<\/span> <span class=\"token string\">'KeyA'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token operator\">!<\/span><span class=\"token punctuation\">(<\/span>event<span class=\"token punctuation\">.<\/span>ctrlKey <span class=\"token operator\">||<\/span> event<span class=\"token punctuation\">.<\/span>metaKey<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"unlocking-the-keyboard\"><span class=\"ez-toc-section\" id=\"Desbloqueo-del-teclado\"><\/span>Desbloqueo del teclado <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>los <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Keyboard\/unlock\"><code>unlock()<\/code><\/a>  El m\u00e9todo desbloquea todas las claves capturadas por el <code>lock()<\/code> m\u00e9todo y regresa sincr\u00f3nicamente.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">navigator<span class=\"token punctuation\">.<\/span>keyboard<span class=\"token punctuation\">.<\/span><span class=\"token function\">unlock<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Cuando se cierra un documento, el navegador siempre llama impl\u00edcitamente <code>unlock()<\/code>.<\/p>\n<h2 id=\"demo\"><span class=\"ez-toc-section\" id=\"Manifestacion\"><\/span>Manifestaci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Puede probar la API de bloqueo de teclado ejecutando el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/keyboard-lock.glitch.me\/\">manifestaci\u00f3n<\/a> en Glitch.  Aseg\u00farate de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\/edit\/#!\/keyboard-lock\">mira el c\u00f3digo fuente<\/a>.  Al hacer clic en el bot\u00f3n Ingresar a pantalla completa a continuaci\u00f3n, se inicia la demostraci\u00f3n en una nueva ventana para que pueda ingresar al modo de pantalla completa.<\/p>\n<p>\n  <iframe allow=\"camera; clipboard; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi; vr\" loading=\"lazy\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/keyboard-lock?attributionHidden=true&amp;sidebarCollapsed=true&amp;path=script.js&amp;previewSize=100\" style=\"height: 100%; width: 100%; border: 0;\" title=\"keyboard-lock on Glitch\"><\/iframe>\n<\/p>\n<h2 id=\"security-considerations\"><span class=\"ez-toc-section\" id=\"Consideraciones-de-Seguridad\"><\/span>Consideraciones de Seguridad <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Una preocupaci\u00f3n con esta API es que podr\u00eda usarse para obtener todas las claves y (junto con el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Fullscreen_API\">API de pantalla completa<\/a> y el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Pointer_Lock_API\">API PointerLock<\/a>) impiden que el usuario salga de la p\u00e1gina web.  Para evitar esto, la especificaci\u00f3n requiere que el navegador proporcione una forma para que el usuario salga del bloqueo del teclado incluso si la API solicita todas las teclas.  En Chrome, esta escotilla de escape es un largo (dos segundos) <kbd>Esc<\/kbd> presione la tecla para activar una salida del bloqueo del teclado.<\/p>\n<h2 id=\"helpful-links\"><span class=\"ez-toc-section\" id=\"Enlaces-Utiles\"><\/span>Enlaces \u00datiles <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h2 id=\"acknowledgements\"><span class=\"ez-toc-section\" id=\"Agradecimientos\"><\/span>Agradecimientos <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Este art\u00edculo fue revisado por <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/jpmedley\">Joe Medley<\/a> y <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/kaycebasques\">Kayce vascos<\/a>.  La especificaci\u00f3n de bloqueo del teclado es creada por <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/garykac\">Gary Kacmarcik<\/a> y <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/jamie-walch-395b332b\">Jamie Walch<\/a>.  Imagen de h\u00e9roe de <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/@kensuarez\">Ken Su\u00e1rez<\/a> en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/s\/photos\/padlock-computer\">Unsplash<\/a>.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Proporcione una experiencia inmersiva a pantalla completa para una variedad de casos de uso, incluidos sitios web interactivos, juegos y escritorio remoto o transmisi\u00f3n de aplicaciones. 28 de julio de&#8230;<\/p>","protected":false},"author":1,"featured_media":81669,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-81668","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Capturar claves con la API de bloqueo de teclado - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Proporcione una experiencia inmersiva a pantalla completa para una variedad de casos de uso, incluidos sitios web interactivos, juegos y escritorio remoto\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Capturar claves con la API de bloqueo de teclado\" \/>\n<meta property=\"og:description\" content=\"Proporcione una experiencia inmersiva a pantalla completa para una variedad de casos de uso, incluidos sitios web interactivos, juegos y escritorio remoto\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-11T15:09:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3339286.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/capturar-claves-con-la-api-de-bloqueo-de-teclado\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/capturar-claves-con-la-api-de-bloqueo-de-teclado\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Capturar claves con la API de bloqueo de teclado\",\"datePublished\":\"2022-09-11T15:09:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/capturar-claves-con-la-api-de-bloqueo-de-teclado\\\/\"},\"wordCount\":853,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/capturar-claves-con-la-api-de-bloqueo-de-teclado\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3339286.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/capturar-claves-con-la-api-de-bloqueo-de-teclado\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/capturar-claves-con-la-api-de-bloqueo-de-teclado\\\/\",\"name\":\"Capturar claves con la API de bloqueo de teclado - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/capturar-claves-con-la-api-de-bloqueo-de-teclado\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/capturar-claves-con-la-api-de-bloqueo-de-teclado\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3339286.jpg\",\"datePublished\":\"2022-09-11T15:09:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Proporcione una experiencia inmersiva a pantalla completa para una variedad de casos de uso, incluidos sitios web interactivos, juegos y escritorio remoto\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/capturar-claves-con-la-api-de-bloqueo-de-teclado\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/capturar-claves-con-la-api-de-bloqueo-de-teclado\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3339286.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-3339286.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-3339286-8815532-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Capture keys with the keyboard lock API - R Marketing Digital","description":"Provide an immersive, full-screen experience for a variety of use cases, including interactive websites, games, and remote desktop","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/","og_locale":"en_US","og_type":"article","og_title":"Capturar claves con la API de bloqueo de teclado","og_description":"Proporcione una experiencia inmersiva a pantalla completa para una variedad de casos de uso, incluidos sitios web interactivos, juegos y escritorio remoto","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-11T15:09:39+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3339286.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Capturar claves con la API de bloqueo de teclado","datePublished":"2022-09-11T15:09:39+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/"},"wordCount":853,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3339286.jpg","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/","url":"https:\/\/rmarketingdigital.com\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/","name":"Capture keys with the keyboard lock API - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3339286.jpg","datePublished":"2022-09-11T15:09:39+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Provide an immersive, full-screen experience for a variety of use cases, including interactive websites, games, and remote desktop","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/dev\/capturar-claves-con-la-api-de-bloqueo-de-teclado\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3339286.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-3339286.jpg","width":1200,"height":360,"caption":"hero-3339286-8815532-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/81668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=81668"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/81668\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/81669"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=81668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=81668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=81668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}