I use Vue.js
It is necessary that when you click anywhere on the page of a particular key (or key combination), for example, Del or Backspase, a click handler is invoked.
How can this be implemented using Vue.js?
Events, like @keydown, work, as I understand it, only in the input fields.
|
1 answer
You can, for example, add an input field, place it outside of the scope (for example, absolute and top = -100), then, when loading and clicking on the page, transfer focus to it.
It is important that the focus is not transferred when clicking on any form, but it will be inconvenient. To do this, you can track the class name of the element you clicked.
Example:
var container = new Vue({ el: '#app', mounted() { this.setInputFocus() document.onclick = this.setInputFocus }, data: () => ({ lastKey: '' }), methods: { setInputFocus(e = {path: []}) { if (e.path[0]) { if (e.path[0].classList[0] == 'form') { return; } } window.focusText.focus() }, setLastKey(e) { focusText.value = "" this.lastKey = e.key } } }); div { margin: 10px 0px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script> <div id=app> <input type="text" id="focusText" @keydown="setLastKey"> <div> {{lastKey}} </div> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in pretium tortor. Quisque ornare, sem nec porta finibus, massa dolor efficitur arcu, at rhoncus turpis tellus sed arcu. Duis feugiat ipsum et justo imperdiet imperdiet. Vestibulum congue purus sed dolor vehicula ullamcorper. Pellentesque vehicula erat ac augue fringilla consequat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec bibendum, arcu quis mattis imperdiet, enim nisl porttitor sapien, eu commodo sem odio id arcu. Fusce at leo nunc. Pellentesque sit amet vestibulum nunc. Praesent rutrum dignissim lorem, at mollis quam lobortis ut. Fusce in consectetur sapien. Integer auctor nulla et aliquet mollis. </div> <div> <input type="text" class="form" value="111"> </div> </div> jsfiddle: https://jsfiddle.net/Nic34/whfvefhz/
|