Question

我有时需要用按下的击键值填充div。我认为以下代码可以工作：

new Vue({
  el: "#app",
  data: {
    content: ""
  },
  methods: {
    press: function(event) {
      console.log(event.key)
      this.content += event.key
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-on:keyup="press">
    click here and type {{content}}
  </div>
</div>

在窗口处于活动状态（但没有输入元素）时，是否有一些特定的操作可以捕获浏览器中的击键？

Answer 1

使用contenteditable div属性

new Vue({
  el: "#app",
  data: {
    content: ""
  },
  methods: {
    press: function(event) {
      this.content = event.target.innerText
      console.log('key:', event.key )
    }
  }
})

.view {color: red }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div @keyup="press" contenteditable="true">type here</div>
  
  <div class="view">{{content}}</div>
</div>

没有输入字段时如何捕获键入内容？

1 个答案: