How to catch a keyup when there is no input field?

Question

I needed at some point to fill a div with the values of the keystrokes being pressed. I thought that the following code would work:

 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> 

Is there something specific to be done to catch keystrokes in a browser when the window is active (but there are no input elements)?

Answer 1

Use contenteditable div attribute

 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>