1

Использую Vue.js
Необходимо, чтобы при нажатии в любом месте страницы определенной клавиши (или комбинации клавиш), например, Del или Backspase, вызывался обработчик нажатия.
Как это можно реализовать средствами Vue.js?
События, наподобии @keydown, срабатывают, как я понял, только в полях ввода.

1

1 ответ 1

0

Можно, например, добавить поле ввода, поместить его за пределами области видимости (например, absolute и top = -100), после чего при загрузке и при клике по странице передавать ему фокус.

Важно, чтобы фокус не передавался при клике на какой-нибудь форме, а то будет неудобно. Для этого можно отслеживать имя класса элемента, по которому кликнул.

Пример:

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/

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.