1

Me gustaría saber como podría cambiar el color de la letra que pulso en el teclado físico, en el teclado virtual hecho con javascript. De momento puedo escribir en el cuadro de texto y al pulsar la tecla con el ratón también escribe. Mencionar que mi archivo css es de bootstrap por lo que no sabría tampoco cómo acceder a la propiedad para cambiar el color.

html

<form name="virtual">
    <input type="text" name="text"/><br><br>
    <input type="button" onclick="q()" value="q" style="border:none;"/>
    <input type="button" onclick="w()" value="w" style="border:none;"/>
</form>

js

function q(){
   document.forms["virtual"]["text"].value += "q";
}

Imagen de ejemplo

introducir la descripción de la imagen aquí

4
  • Con esa única información es dificil ayudarte. ¿Que teclado utilizas, es algún plugin o lo has hecho tu? el 13 ene. 2017 a las 12:35
  • Es una plantilla de bootstrap y este no es el teclado completo sino el inicio, solo la primera letra, esto lo he hecho yo y por lo pronto funciona la caja de texto con el teclado físico y también al clicar con el ratón en la letra, que escribe en la caja de texto. Mi pregunta es, ¿Cómo hago para que cuando escriba esa letra en el teclado físico ésta se ilumine?, añadiré una imagen para que se vea más claro.
    – Jose
    el 13 ene. 2017 a las 12:41
  • ¿Es un teclado virtual como éste y quieres el mismo efecto?
    – gugadev
    el 13 ene. 2017 a las 12:48
  • Correcto @guzgarcia !!
    – Jose
    el 13 ene. 2017 a las 12:49

2 respuestas 2

4

Si lo que quieres es que se ilumine el input con la letra que se ha pulsado en el teclado real, lo que podrías hacer es añadir un controlador del evento keydown y keyup al input donde se va a escribir:

  • En el keydown compruebas qué tecla se pulsó y le añades una clase específica
  • En el keyup quitas la clase que pusiste en el keydown

Y en tu clase puedes cambiar el color del botón o ponerle los estilos que quieras. Algo como esto:

// tus funciones
function q(){
  document.forms["virtual"]["text"].value += "q";
}
function w(){
  document.forms["virtual"]["text"].value += "w";
}

// controlador del evento keydown
document.getElementById("miInput").addEventListener("keydown", function(e) {
  // leemos la tecla pulsada y la pasamos a minúscula
  var tecla = String.fromCharCode(e.keyCode).toLowerCase();
  // seleccionamos el botón que tenga esa tecla como valor y lo activamos
  if (document.querySelector("input[value=" + tecla + "]")) {
    document.querySelector("input[value=" + tecla + "]").className = "active";
  }
});

// controlador del evento keyup
document.getElementById("miInput").addEventListener("keyup", function() {
  //quitamos la clase activa
  if (document.querySelector("input.active")) {
    document.querySelector("input.active").className = "";
  }
});
/* la tecla pulsada se pondrá roja */
input.active {
  color:white;
  background:red;
}
<form name="virtual">
  <input type="text" name="text" id="miInput" /><br><br>
  <input type="button" onclick="q()" value="q" style="border:none;"/>
  <input type="button" onclick="w()" value="w" style="border:none;"/>
</form>

2
  • Tienes razón, mi solución sólo funciona para teclas "no especiales" y no permite que se iluminen dos al mismo tiempo. Deja que lo mire
    – Alvaro Montoro
    el 13 ene. 2017 a las 13:44
  • Aunque las dos soluciones son correctas, he marcado la de abajo porque me parecía más simple de implementar, muchas gracias por tu tiempo y la molestia. Un saludo!
    – Jose
    el 16 ene. 2017 a las 10:51
3

¿Cómo hago para que cuando escriba esa letra en el teclado físico ésta se ilumine?, añadiré una imagen para que se vea más claro.

Conforme tu respuesta a mi comentario fue positivo, entonces, lo que quieres hacer se hace con la ayuda de dos eventos:

  • keydown
  • keyup

Ambos eventos se dispararán cuando se mantenga abajo una tecla (no confundir con keypress) y cuando se suelta la tecla respectivamente.

input.addEventListener('keydown', e => { ... });
input.addEventListener('keyup', e => { ... });

He creado un ejemplo para que veas cómo funciona.

Nota: código solo de referencia, no contiene todas las validaciones ni funcionalidad al 100%.

let inputKeyboard = document.getElementById('input');
let keyboard = document.getElementById('keyboard');

inputKeyboard.addEventListener('keydown', e => {
  lightUpKey(e.key.toLowerCase());
});

inputKeyboard.addEventListener('keyup', e => {
  lightDownKey(e.key.toLowerCase());
});

inputKeyboard.addEventListener('blur', () => {
  let focusedKey = keyboard.querySelector('.key.lightup');
  if (focusedKey) {
    focusedKey.classList.remove('lightup');
  }
});

function lightUpKey (key) {
  // en caso no se quiera iluminar más de una tecla
  if(keyboard.querySelector('.key.lightup')) {
    return;
  }
  let virtualKey = keyboard.querySelector(`.key[value="${key}"]`);
  if (virtualKey) {
    virtualKey.classList.add('lightup');
  }
}

function lightDownKey (key) {
  let virtualKey = keyboard.querySelector(`.key[value="${key}"]`);
  if (virtualKey) {
    virtualKey.classList.remove('lightup');
  }
}
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#trigger {
  margin: 20px 10px;
  position: relative;
  width: 200px;
}

#input {
  border: 1px solid #ddd;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.075) inset,
    0 0 1px 0 rgba(0,0,0,.1) inset;
  border-radius: 3px;
  padding: .5rem .85rem;
}

#input:focus + #keyboard {
  opacity: 1;
  transform: translateY(10px);
  visibility: visible;
}

#keyboard {
  background-color: #eee;
  border: 4px solid #ccc;
  border-radius: 2px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 100%;
  transform: translateY(30px);
  transition: all .23s ease;
  visibility: hidden;
  width: 370px;
}
#keyboard .row {
  display: flex;
  padding: .5rem 0;
  justify-content: space-around;
  width: 100%;
}
#keyboard .row .key {
  background-color: #222;
  border: 1px solid #222;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-family: 'segoe ui', 'ubuntu';
  height: 30px;
  line-height: 30px;
  margin: 0 3px;
  text-align: center;
  flex: 0 0 30px;
}
#keyboard .row .key.spacebar {
  flex: 0 0 180px;
}
#keyboard .row .key.lightup {
  background-color: #eee !important;
  border-color: #444;
  color: #444 !important;
}
<div id="trigger">
  <input id="input" placeholder="Escribe algo" />
  
  <div id="keyboard">
    <!-- primera fila -->
    <section class="row">
      <span class="key" value="q">Q</span>
      <span class="key" value="w">W</span>
      <span class="key" value="e">E</span>
      <span class="key" value="r">R</span>
      <span class="key" value="t">T</span>
      <span class="key" value="y">Y</span>
      <span class="key" value="u">U</span>
      <span class="key" value="i">I</span>
      <span class="key" value="o">O</span>
      <span class="key" value="p">P</span>
    </section>
    <!-- segunda fila -->
    <section class="row">
      <span class="key" value="a">A</span>
      <span class="key" value="s">S</span>
      <span class="key" value="d">D</span>
      <span class="key" value="f">F</span>
      <span class="key" value="g">G</span>
      <span class="key" value="h">H</span>
      <span class="key" value="j">J</span>
      <span class="key" value="k">K</span>
      <span class="key" value="l">L</span>
      <span class="key" value="ñ">Ñ</span>
    </section>
    <!-- tercera fila -->
    <section class="row">
      <span class="key" value="z">Z</span>
      <span class="key" value="x">X</span>
      <span class="key" value="c">C</span>
      <span class="key" value="v">V</span>
      <span class="key" value="b">B</span>
      <span class="key" value="n">N</span>
      <span class="key" value="m">M</span>
      <span class="key" value=",">,</span>
      <span class="key" value=".">.</span>
    </section>
    <!-- barra -->
    <section class="row">
      <span class="key spacebar" value=" ">SPACE</span>
    </section>
  </div>
</div>

1
  • 1
    Aunque las dos opciones son correctas, he marcado la tuya porque me ha parecido más simple, muchas gracias por tomarte el tiempo y la molestia, un saludo!
    – Jose
    el 16 ene. 2017 a las 10:50

Tu Respuesta

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

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