JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <p>你按下的是按鍵是: {{ pressKey }}</p>
  <input type="text" @keyup="press">
</div>

SCSS

#app {
  display: block;
  overflow: hidden;
  width: 100%;
}

p{
  margin: 1rem 0;
}

input {
  padding: 3px;
}

JavaScript

const vm = Vue.createApp({
  data: () => {
    return {
      pressKey: ''
    }
  },
  methods: {
    press(event) {
      this.pressKey = event.key;
      window.setTimeout(() => {
        event.target.value = '';
      }, 300)
    }
  }
}).mount('#app');