如果数字在类型编号的输入中发生变化,如何触发功能?

时间:2018-05-06 21:58:41

标签: jquery html5 events input

假设我的input类型number如此:

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

我想在每次数字上升或下降时触发一个名为canvas的{​​{1}}渲染函数。

此解决方案:

renderCanvas()

当我使用键盘递减/递增我的值时起作用,但是当我使用箭头和鼠标时,该功能仅在鼠标启动时触发。

<input type="number" step="0.05" onchange="renderCanvas()">
function renderCanvas()
{
  console.log("the value is " + document.getElementsByTagName("input")[0].value)
}

如何使用与使用鼠标键盘相同的结果?

ps:问题与此post不同,因为该功能仅在键/鼠标启动时触发。我希望我的功能在每次屏幕上的值发生变化时触发。

2 个答案:

答案 0 :(得分:1)

您应该使用keyupmouseup事件,因为您已经为jquery添加了标记,如果我正确理解您希望出现alert / console.log,或者每当您使用更改值时显示值鼠标或键盘,如果这里是正确的是演示,您可以看到每次使用鼠标,键盘,数字键或箭头键时控制台都会打印值。希望它有所帮助

&#13;
&#13;
var here = 0;
$("#my-input").on('keyup mouseup change', function() {
  if ($(this).val() !== '') {
    console.log(here++);
    console.log("the value is " + $(this).val());
  }
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="my-input" type="number" step="1">
&#13;
&#13;
&#13;

EDIT

或者如果您想要检测数字更改,如果您将按键保持在我们将鼠标悬停在其上方时出现的数字输入的箭头上,那么我认为这不是一项容易的任务,在这种情况下,应该使用自定义滑块并将滑块绑定到隐藏的输入以继续更新值并将onchange绑定到该隐藏的输入,以便不断更新你的卡瓦斯

答案 1 :(得分:0)

答案是使用$class->get_top_headlines($params); 事件。