1
input.addEventListener('keydown', fninput);

Когда я устанавливаю событие для input keydown, то оно срабатывает после второго нажатия на клавишу, приходится использовать событие keyup, но визуально keyup чуть медленнее работает, потому что срабатывает после отпускания кнопки.

Почему так происходит с событием keydown и какое есть решение?

Код:

// создаю ссылки и задаю параметры
const input = document.querySelector('input[name=inputData]');
const outputData = document.querySelector('#noticeForUser');
const getInputClass = input.getAttribute('class');
input.setAttribute('placeholder', 'Введите значение');
// объявляю функцию
const fninput = (handler) => {
  let output = Math.ceil(input.value / 0.97);
  if (input.value >= 1) {
    return outputData.innerHTML = output + ' руб.', input.removeAttribute('class'), input.setAttribute('class', getInputClass), outputData.removeAttribute('class');
  } else if (isNaN(input.value)) {
    return outputData.innerHTML = 'Введите цифры', input.setAttribute('class', 'bgred'), outputData.setAttribute('class', 'bgred');
  } else if (input.value === '') {
    return outputData.innerHTML = 'Введите значение', input.removeAttribute('class'), input.setAttribute('class', getInputClass), outputData.removeAttribute('class');
  } else if (input.value <= 0) {
    return outputData.innerHTML = 'Введите значение больше нуля', input.setAttribute('class', 'bgred'), outputData.setAttribute('class', 'bgred');
  } else {
    return outputData.innerHTML = '', input.removeAttribute('class'), input.setAttribute('class', getInputClass), outputData.removeAttribute('class');
  }
}
input.addEventListener('click', () => outputData.innerHTML = 'Введите значение');
input.addEventListener('keydown', fninput);
.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&amp;subset=cyrillic-ext" rel="stylesheet">
  <link rel="stylesheet" href="../css/style.css">
  <link rel="stylesheet" href="../css/bootstrap-grid.min.css">
  <link rel="stylesheet" href="../css/bootstrap-reboot.min.css">
  <title>Store</title>
</head>

<body>
  <div class="container-fluid">

    <header class="header">
      <div class="logo bg">
        <div class="row">
          <div class="col">ГЛАВНАЯ</div>
        </div>
      </div>

      <nav class="header-nav bg">
        <div class="row">
          <div class="col">МЕНЮ</div>
        </div>
      </nav>
    </header>

    <section id="main" class="main bg">
      <div class="row">
        <div class="col align-self-center">
          <a id="link" href="/html/main.html">ссылка</a>
        </div>
        <div class="col align-self-center">2</div>
        <div class="col align-self-center">3</div>
      </div>
      <div class="row">
        <div class="col">
          <form name="myform">
            <span id="noticeForUser"></span>
            <br>
            <input class="brblack" type="text" name="inputData" autocomplete="off">
            <br>
            <br>
            <input type="submit" name="submit" value="Отправить">
          </form>
        </div>
      </div>
    </section>













    <footer class="footer bg">
      <div class="row">
        <div class="col">
          FOOTER
        </div>
      </div>
    </footer>

    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/app.js"></script>

  </div>
</body>

</html>

https://jsfiddle.net/abnf6uac/

6
  • в каком именно месте вы проставляете этот листенер? 16 мая 2018 в 9:12
  • при вводе в input 16 мая 2018 в 9:13
  • Добавьте полный код, который будет включать js и html-разметку 16 мая 2018 в 9:17
  • Если вы добавляете при вводе в инпут, то при первом вводе у вас как раз и будет инициализироваться лисенер, который будет отрабатывать уже для 2+ нажатий 16 мая 2018 в 9:20
  • добавил код jsfiddle.net/abnf6uac 16 мая 2018 в 9:57

2 ответа 2

1

Проблема в том, что значение в поле ввода обновляется после события keydown.

Из-за этого проверка input.value - не дает результата, так как в value еще не добавлен нажатый символ.


Если в проверке нуждается не конкретный введенный символ, а полная строка можно воспользоваться, как советует @Other, событием input.

6
  • 1
    И, как следствие, юзаем input event ;)
    – user207618
    16 мая 2018 в 10:02
  • я не знал, что есть input событие))) сколько не искал список событий для addEventListener, так и не смог найти. на англ. искать не могу, не знаю языка, а на русском мало инфы порой:( 16 мая 2018 в 10:08
  • короче, вопрос решил событием input. Сообществу в очередной раз спасибо за помощь:)) 16 мая 2018 в 10:09
  • @Александр, события отличаются в зависимости от тега, поэтому лучше искать по нему
    – Grundy
    16 мая 2018 в 10:10
  • @Grundy, А разве в input нет свойства data, где последний символ?
    – user207618
    16 мая 2018 в 22:39
0

А у меня все работает:

const log = document.getElementById('log');
const fninput = (e) => {
  log.innerHTML = "<br>" + e.code + log.innerHTML;
}

const input = document.getElementById("xmm");
input.addEventListener('keydown', fninput);
<input id="xmm" type="text" />

<p id="log"></p>

2

Ваш ответ

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

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