Как я могу вызвать функцию, когда число изменяется на входе типа номер?

Question

Допустим, у меня есть input типа number как:

<input type="number" step="0.05">

Я бы хотел вызвать canvas функцию рендеринга, вызываемую, например, renderCanvas() каждый раз, когда число увеличивается или уменьшается.

Это решение:

<input type="number" step="0.05" onchange="renderCanvas()">

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

function renderCanvas()
{
  console.log("the value is " + document.getElementsByTagName("input")[0].value)
}

<input type="number" step="0.05" onchange="renderCanvas()">

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

ps: вопрос не такой, как этот post , так как функция срабатывает только тогда, когда нажата клавиша / мышь. Мне бы хотелось, чтобы моя функция запускалась при каждом изменении значения на экране.

Answer 1

Ответ - использовать событие oninput.

Answer 2

Вы должны использовать события keyup и mouseup, так как вы добавили тег для jquery, если я правильно понял, что вы хотите, чтобы alert / console.log появлялся или отображал значение всякий раз, когда вы изменяете значение с помощью мыши или Клавиатура, если это правильно, то здесь вы можете увидеть, как консоль печатает значение каждый раз, когда вы используете мышь, клавиатуру, цифровые клавиши или клавиши со стрелками. Надеюсь, это поможет

var here = 0;
$("#my-input").on('keyup mouseup change', function() {
  if ($(this).val() !== '') {
    console.log(here++);
    console.log("the value is " + $(this).val());
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="my-input" type="number" step="1">

EDIT

Или, если вы хотите обнаружить изменение номера, если вы удерживаете нажатой клавишу со стрелкой на вводе номера, который появляется при наведении на нее курсора, тогда я не думаю, что это будет легкой задачей, в этом случае вы следует использовать пользовательский ползунок и привязать ползунок к скрытому вводу, чтобы постоянно обновлять значение, и привязать onchange к тому скрытому вводу, который продолжает обновлять ваши кавы