1

Есть такой небольшой 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 код с использованием как виртуальной, так и физической клавиатуры?!

3
  • я не понял, что работает, что не работает, и куда смотреть :)
    – Grundy
    Commented 10 янв. 2020 в 21:38
  • span не ловит клавиатурные события
    – Grundy
    Commented 10 янв. 2020 в 21:58
  • @Grundy, при клике --> 4 кружочка заполняются и в консоле видим что кликнули, нужен такой же эффект при нажатии на клавиши !
    – SVE
    Commented 11 янв. 2020 в 4:37

1 ответ 1

2

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

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

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

2
  • Спасибо! Еще бы во vue это реализовать ))
    – SVE
    Commented 11 янв. 2020 в 19:15
  • 1
    А в чём проблема? В хуке mounted на обьект document кинь обработчик на событие keydown(keypress). Обработчиком будет функция обьявлена в блоке methods. И На самом элементе, на корневом тэге слушай событие onclick, которое буде устанавливать фокус. Дальше можешь наывесить анимации и т.п. по вкусу. Ничего сложного! Главное не лениться! Commented 11 янв. 2020 в 21:20

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.