Менять цвет виртуальной клавиатуры, нажав клавишу физической клавиатуры с javascript

Мне хотелось бы знать, как мог бы меняться цвет буквы, которую я нажимаю в физической клавиатуре, в виртуальной клавиатуре, сделанной с javascript. На данный момент я могу писать в поле ввода текста и нажав клавишу с мышью, также напиши. Упоминать о том, что мой файл css - bootstrap а следовательно он не знал бы также, как соглашаться на свойство, чтобы менять цвет.

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";
}

Изображение примера

introducir la descripción de la imagen aquí

1
задан 13.01.2017, 15:16
0 ответов

Как я делаю для того, чтобы, когда я напишу эту букву в физической клавиатуре, эта была освещена?, я добавлю изображение для того, чтобы он оказался более ясным.

Так же как твой ответ на мой комментарий был положительным, тогда, что ты хочешь сделать, делается с помощью двух событий:

  • keydown
  • keyup

Оба события взорвутся, когда будет держаться внизу клавиша (не запутывать с keypress) и когда освобождается клавиша соответственно.

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

Я создал пример для того, чтобы ты увидел, как оно функционирует.

Заметь: одинокий код ссылки, не содержит ни всех утверждений, ни функциональности в 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>
3
ответ дан 03.12.2019, 17:41
  • 1
    Хотя два выбора правильны, я пометил твоя, потому что он мне казался má s простой, большое спасибо из-за того, что время берет и беспокойство, приветствие! –  16.01.2017, 12:50

Если то, что ты хочешь, состоит в том, чтобы был освещен неудар в лунку с буквой, которая была нажата в реальной клавиатуре, что ты мог бы делать, состоит в том, чтобы добавлять драйвер события keydown и keyup в input где он напишет себе:

  • В keydown ты подтверждаешь, какая клавиша была нажата, и добавляешь специфический класс
  • В keyup ты снимаешь класс, который ты поместил в keydown

И на твой класс ты можешь менять цвет кнопки или помещать ему стили, которые ты хочешь. Немного как это:

// 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>
4
ответ дан 03.12.2019, 17:41
  • 1
    Ты имеешь razó n, мой solució n só оно это функционирует для клавиш " не especiales" и он не позволяет, что были освещены два в то же время. Позволь, чтобы он это смотрел –  13.01.2017, 15:44
  • 2
    Хотя два решения правильны, я пометил нижнюю, потому что я parecí в má s простой помогания, большое спасибо в течение твоего времени и беспокойство. Приветствие! –  16.01.2017, 12:51

Теги

Похожие вопросы