如何在数字类型的输入中更改数字时触发函数？

Question

假设我有一个number 类型的input，如下所示：

<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

您应该使用 keyup 和 mouseup 事件，因为如果我理解正确，您已经添加了 jquery 的标签，您希望在使用鼠标或键盘，如果正确，这里是演示，您可以看到控制台在每次使用鼠标、键盘、数字键或箭头键时打印值。希望对你有帮助

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 绑定到不断更新cavas的隐藏输入

Answer 2

答案是使用oninput 事件。