vue событие клавиатуры

132

14 февраля 2022, 10:00

Есть такой небольшой vue проект: codesandbox

Смысл что есть либо поле (search), либо просто набор элементов (li), в которых должны отображаться введенные символы (1, 2, 3, ...).

Символы вводим с "виртуальной" клавиатуры (v-on:click - работает) или с физической ( v-on:keyup - не работает ).

Код:

<b-form-input v-model="search"></b-form-input>
    <ul class="show">
      <li v-bind:key="i" v-for="i in 4" :class="{on: pinLength>=i}"></li>
    </ul>
    <ul class="key">
      <li>
        <span v-on:click="typePin(1)">1</span>
      </li>
      <li>
        <span v-on:click="typePin(2)">2</span>
      </li>
      <li>
        <span v-on:keyup.3="typeNum(3)">3</span>
      </li>
      ....
      </li>
    </ul>

<script>
export default {
  name: "HelloKey",
  data() {
    return {
      search: "",
      pin: ""
    };
  },
  methods: {
    typePin(num) {
      console.log(num);
      if (this.pin.length < 4) {
        this.pin = this.pin.concat(num);
      }
      if (this.pin.length === 4) {
        ...
      }
    },
    clearPin() {
      this.pin = "";
    },
    clearCode() {
      this.code = "";
    }
  },
  mounted() {
    this.pin = "";
  },
  computed: {
    pinLength() {
      return this.pin.length;
    }
  },
  created: function() {
    window.addEventListener("keydown", e => {
    console.log(e.keyCode);
    if (e.keyCode === 51) { // клавиша 3
      console.log("S>> " + e.key);
      this.typePin(e.key);
    }
  });
}
};
</script>

Вопрос: Как ввести данные в поле формы или заполнить pin код с использованием как виртуальной, так и физической клавиатуры?!

Answer 1

Думаю, проблема в том, что элементы не генерируют события нажатия клавиши. Его генерирует сам документ, а значит подписываться нужно на него:

document.addEventListener('keydown', function(event) {
  if (event.code == 'KeyZ' && (event.ctrlKey || event.metaKey)) {
    alert('Отменить!')
  }
})

Если у Вас на странице больше нет точек, где тоже может быть ввод с клавиатуры, можете подписаться в хуке mounted(). Если же есть, придётся реагировать при фокусе. Точно не знаю, все ли элементы могут получить фокус или только элементы ввода. Если последнее, то придётся сделать искусственный фокус: клик по элементу позволяет вводить туда данные, нажатие Enter завершает ввод. Как-то так