当数字类型的输入中数字发生变化时，如何触发函数？

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

您应该使用

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

绑定到隐藏输入以不断更新您的cavas

Answer 2

答案是使用

input

事件。