@dmitriyuvin
FullStack developer ( Laravel & Vue )

Как глобально отследить нажание на клавишу, Vue.js?

<template>
    <div class="container" @keyup.191="searchFocus">
        <Loader v-if="isLoading"/>
        <div class="row">
            <div class="col-md-2">
                <div>
                    <strong>Поиск</strong>
                    <input type="text" v-model="search" class="form-control" ref="searchInput"
                    placeholder="'/' чтобы начать">
                </div>
                <div class="mt-3">
                    <strong>Фильтры</strong>
                    <div>
                        <u>Возраст</u>
                    </div>
                    <ul>
                        <li>
                            <input type="checkbox" id="less_18" v-model="less_18">
                            <label for="less_18">До 18</label>
                        </li>
                        <li>
                            <input type="checkbox" id="more_18" v-model="more_18">
                            <label for="more_18">После 18</label>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-8">
                // Kontent
            </div>
            <div class="col-md-2">
                <h4>Новый пользователь</h4>
                <button type="button" class="btn btn-primary"
                        data-toggle="modal" data-target="#addModal">
                    <i class="fa fa-plus"></i>
                    Добавить
                </button>
            </div>
        </div>
    </div>
</template>


Есть инпут для поиска пользователя с ref="searchInput", я хочу чтобы если я нажму на странице клавишу - /, 191 code, то чтобы инпут фокусировался, как это сделать?
  • Вопрос задан
  • 242 просмотра
Решения вопроса 2
0xD34F
@0xD34F Куратор тега JavaScript
methods: {
  onKeyPress(e) {
    if (/* нажато что надо */) {
      this.$refs.searchInput.focus();
    }
  },
},
created() {
  document.addEventListener('keypress', this.onKeyPress);
  this.$on('hook:beforeDestroy', () => document.removeEventListener('keypress', this.onKeyPress));
},
Ответ написан
Fragster
@Fragster
помогло? отметь решением!
В компоненте с полем поиска в событии mount навесить нативный js'овский event listener прямо на document. В beforeDestroy не забыть отцепить.
Тогда если на станице есть соответствующий компонент - всё будет работать. Если нет - не будет ошибок.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы