主页 / 问题 / 1068371
Accepted
HamSter
Asked:2020-01-11 05:07:35 +0000 UTC2020-01-11 05:07:35 +0000 UTC

vue 键盘事件

  • 772

有这么一个小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>

问题：如何使用虚拟键盘和物理键盘在表单域中输入数据或填写密码？！

javascript

1 个回答

  1. Best Answer

    我认为问题在于元素不会触发按键事件。它是由文档本身生成的，这意味着您需要订阅它：

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

    如果页面上不再有键盘输入也可以的点，可以在mounted()钩子中订阅。如果有，您将不得不集中精力做出反应。我不确定是否所有元素都可以获得焦点或只有输入元素。如果是后者，那么您必须做一个人为的技巧：单击元素允许您在那里输入数据，按 Enter 完成输入。像这样的东西

    • 2

相关问题