2

Intento hacer que cuando el usuario teclee (por ejemplo) "fondo" se ejecute una función que haga que se cambien el fondo o cuando teclee la palabra "blanco" se abra una nueva pagina en blanco.

Un ejemplo sería como el de YouTube que cuando tecleas la palabra awesome la barra del video se vuele de color arcoiris, ya fui a páginas y busqué y encontré esto:

$(document).ready(function () {
  $(document).keypress(function (e) {
    if (e.which == 13) {
     alert("Usted a presionado la tecla Enter!");
    }
  });
});

Pero no sé cómo hacerle que en vez de una letra sea una palabra y también ya investigué y vi que le puedo cambiar el 13 por un 68 o otro para que sea otra letra pero cuando lo pruebo y presiono esa tecla no pasa nada.

PD: Quiero que pase cuando no hay nada seleccionado (que no haya ningún elemento en focus, sino solo el body o el documento completo)

1 respuesta 1

3

Simplemente lleva un registro de las teclas pulsadas y a partir de ahí comprueba si se están formando palabras. Lo puedes hacer tan sencillo o tan complicado como quieras: comprobando sobre la marcha o sólo cuando se pulse el enter, quitando los caracteres iniciales que no van a funcionar o no, comprobando que las teclas pulsadas sean letras o no, buscar palabras o esperando frases más "estructuradas"...

Aquí te voy a poner un ejemplo básico, lo que hace es leer las teclas pulsadas pero sólo las procesa si son letras (ASCII 65 a 90 para mayúsculas, y 97 a 122 para minúsculas) añadiéndolas a una palabra; y si la tecla no es una letra, se borra la palabra. Al final se comprueba si la palabra se corresponde con un valor que tengo definido y se realiza una acción. Escribe "fondo" (sin las comillas) para que el fondo cambie a azul, o "color" para que el color del texto cambie a amarillo.

Demo:

var palabra = "";

$(document).ready(function() {
  $(document).keypress(function(e) {
    if ((e.which > 96 && e.which < 123) || (e.which > 64 && e.which < 91)) {
      var letra = String.fromCharCode(e.which).toLowerCase();
      palabra += letra;
      console.log(palabra);
    } else {
      palabra = "";
    }

    switch (palabra) {
      case "fondo":
        $("body").css("background", "blue");
        palabra = "";
        break;
      case "color":
        $("body").css("color", "yellow");
        palabra = "";
        break;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h1>Teclado</h1>
<p>Escribe "fondo" para cambiar el fondo a azul.</p>
<p>Escribe "color" para cambiar el color de texto a amarillo.</p>
<p>Pulsa <kbd>Enter</kbd> para recomenzar la palabra.</p>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.