Как отследить нажатие на кнопку js
Перейти к содержимому

Как отследить нажатие на кнопку js

  • автор:

Как отследить нажатия одной кнопки а потом другой?

либо через флаг, что капс был нажат, либо при нажатии капса помещать значение в пул нажатых клавиш и смотреть, что значение пула последнее или имеется в пуле.

29 мар 2020 в 18:52
необходимо отслеживать нажатие на элементе какого типа (input, p, div. )?
29 мар 2020 в 19:30

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Вы можете отследить нажатие caps-lock и нужных клавиш alt + ctrl через keydown .
Так же он работает и с keyup .
При использовании же keyPress Вы не получите event о нажатии.

Соответственно, чтобы проверить нажатие ctrl + alt при включенном Caps-lock — Вы можете воспользоваться следующим решением:

 document.addEventListener('keydown', function(event) < var caps = event.getModifierState && event.getModifierState('CapsLock'); if(caps)< if(event.key == 'Alt' && event.ctrlKey)< console.log('Включен Caps-lock, зажат Ctrl и нажат Alt'); >> >);

Отслеживать
ответ дан 29 мар 2020 в 20:52
Denis640Kb Denis640Kb
14.1k 5 5 золотых знаков 22 22 серебряных знака 46 46 бронзовых знаков

    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.14.4854

js как определить какая кнопка нажата

Для определения нажатой клавиши можно использовать событие keydown и свойство event.key .

document.addEventListener('keydown', function (event)  if (event.key === 'Enter')  console.log('Нажата клавиша Enter'); > else if (event.key === 'Escape')  console.log('Нажата клавиша Escape'); > >); 

В этом примере мы добавили обработчик события keydown на документ. Когда клавиша нажата, функция обработчика будет вызвана и передаст объект события event . Затем мы проверим, какая клавиша была нажата, используя свойство event.key , и выведем сообщение в консоль.

Вы можете использовать любые другие клавиши, проверяя их с помощью if / else if конструкций.

Как отслеживать нажатие нескольких кнопок в форме одновременно?

Но на мой взгялд это очень плохое решение, ведь если добавится ещё один таб или количество форм вырастет, то код будет дублироваться.
Я бы хотел отслеживать клик на табы логина и регистрации и в зависимости от того, на какой был клик — показывать ту форму. Я пытался решить вопрос через forEach, но я так понял он при запуске скрипта отрабатывает один раз и всё, так же мне кажется бесконечный цикл не вариант — систему повесит, что я могу сделать?

  • Вопрос задан более трёх лет назад
  • 226 просмотров

Комментировать
Решения вопроса 1
Сергей Соколов @sergiks Куратор тега JavaScript
Для «двухклавишного» выключателя можно предложить такой общий обработчик кликов:

const handler = (e) => < e.preventDefault(); const active = document.querySelector('.form-login__header-link.active'); const target = e.target; if (target === active) return; [register, login].forEach(el =>el.classList.toggle('active')); [. formContainer].forEach( el => el.classList.toggle('none')); > login.addEventListener('click', handler); register.addEventListener('click', handler);

e.target – кликнутый элемент.

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ответы на вопрос 1

Создайте класс табы — будете использовать везде, не только в этой ситуации.

Обработчики кликов добавляйте не кнопкам переключения, а их обертке. Затем по всплытию события смотрите что нажато, если нужная кнопка, то функция выполняется дальше, если нет, то функция прерывается. У каждый кнопки должно быть значение указывающее, на то, какой таб она открывает

Ответ написан более трёх лет назад
Нравится 1 4 комментария

BenderIsGreat34

Иван @BenderIsGreat34 Автор вопроса
Алексей я не до конца понял следующее

У каждый кнопки должно быть значение указывающее, на то, какой таб она открывает

, это о каком идёт значении? нормальный нейминг класса у кнопки?

Например структура такая

.wrap-button .button(data-value="1") .button(data-value="2") .wrap-tabs .tab(data-tab="1") .tab(data-tab="2")

В зависимости от data-value нажатой кнопки мы показываем tab с соответствующим значением data-tab

Как отследить ЗАЖАТИЕ кнопки javascript?

Сейчас пишу игру, нужно отследить зажал ли пользователь кнопку. onclick не помогает, он отслежывает только когда нажали на кнопку.

  • Вопрос задан более года назад
  • 600 просмотров

4 комментария

Простой 4 комментария

hahenty

onmousedown, onmouseup
изучать события браузера

teaCode

Максим Бенец @teaCode Автор вопроса
Сергей Сергей, Всё равно не работает, то же самое что onclick. Есть ли другой способ?

hahenty

других способов нет.

WblCHA

Максим Бенец, может стоит для начала сделать что-то попроще?
Решения вопроса 0
Ответы на вопрос 2

dedalik

Веб разработчик

Можно проверять нажатие кнопки мыши, задать промежуток времени, которое определяет, что пользователь удерживает кнопку, в примере 1 сек

const timeout = 1000; let idTimeout; window.addEventListener('mousedown', function() < idTimeout = setTimeout(function() < // Кнопка нажата более 1 секунды >, timeout); >); window.addEventListener('mouseup', function() < clearTimeout(idTimeout); >);

Ответ написан более года назад

WblCHA

mouseIsDown можно убрать.

dedalik

WbICHA, Когда выполняется setTimeout событие mousedown может быть или не быть. С помощью переменной мы точно знаем, выполняется в данный момент mousedown или нет.

WblCHA

Radiks Alijevs, то есть ты хочешь сказать, mouseIsDown может быть фолс во время вызова калбека таймаута?

dedalik

Да, ты прав, там же clearTimeout. Исправил

Mecitan

Уверенный пользователь клавиатуры

В своё время решал подобную задачу. Попробуйте решить через флаг и условие, выполняйте действие. Когда действие выполнено, меняете flag = true;

let flag = false; if(args) < //Ваш код flag = true; >

upd: К тому, что написал я, примите к сведению ту информацию, на которую указал Сергей Сергей. В целом, это должно решить вашу задачу.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *