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

У меня есть стандартное текстовое поле ввода HTML, которое запускает функцию javascript в событии onChange. Вход имеет ступенчатую функцию, и значение изменяется на 0,005 при нажатии стрелок вверх или вниз. Я хочу определить, запускается ли событие onChange нажатием клавиш со стрелками или вводом пользователем значения в поле ввода. Как мне отличить их друг от друга?

<input type = "number" min = "0" max = "100" step = "0.005" />

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

— 11.03.2019 23:56

javascript html reactjs textbox onchange

11.03.2019 23:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

210

Ответы 1

<html lang = "en">
<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">
    <title>Document</title>
</head>
<body>
    <h1>Test</h1>
    <input id='myfun' type = "number" min = "0" max = "100" step = "0.005" onchange = "myFunction()" />
    <div id = "result"></div>
</body>

<script>
    function myFunction(){
        console.info('My new value : ', document.getElementById('myfun').value);

        var str = document.getElementById('myfun').value
        document.getElementById('result').innerText = str;
    }
</script>
</html>

Посмотрите мой код, и вы увидите, что каждый раз, когда вы меняете код, он показывает значение и все, что вам нужно.

<input id='myfun' type = "number" min = "0" max = "100" step = "0.005" onchange = "myFunction()" />
<div id = "result"></div>

function myFunction(){
  console.info('My new value : ', document.getElementById('myfun').value);

  var str = document.getElementById('myfun').value
  document.getElementById('result').innerText = str;
}

<html lang = "en">

  <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">
    <title>Document</title>
  </head>

  <body>
    <h1>Test</h1>
    <input id='myfun' type = "number" min = "0" max = "100" step = "0.005" onchange = "myFunction()" />
    <div id = "result"></div>
  </body>

  <script>
    function myFunction() {
      console.info('My new value : ', document.getElementById('myfun').value);

      var str = document.getElementById('myfun').value
      document.getElementById('result').innerText = str;
    }

  </script>

</html>

12.03.2019 00:02