Question

到目前为止，我只是使用＆＃34;更改＆＃34;查看类型＆＃34;数字＆＃34;的输入字段被改变了。但是，现在我需要知道数字是递增还是递减以执行不同的操作。如何查看号码的更改方式？

使用JQuery寻找解决方案，但普通的旧JavaScript也很好。

Answer 1

您可以直接存储输入值并在更改时进行比较：

let value = $('#test').val();

$('#test').on('change',function(){
  if($(this).val() > value){
    console.log('Input was incremented');
  }else{
    console.log('Input was decremented');
  }
  
  value = $(this).val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="test" value="0">

Answer 2

您需要使用change函数之外的变量来跟踪输入的最后一个值。在更改函数内部，只需与此值进行比较，即可确定新值是高还是低。检查后不要忘记更新以前的值！

这可以在以下内容中看到：

let previous_value;

document.getElementById("input").addEventListener("change", function() {
  let value = document.getElementById("input").value;
  if (previous_value > value) {
    console.log("Decreased");
  } else if (previous_value < value) {
    console.log("Increased");
  }
  previous_value = value;
});

<input type="number" id="input">

Answer 3

除了在JS中将先前值存储在内存中的建议之外，您还可以将其作为数据属性存储在输入元素本身上。这样，来自应用程序中任何位置的JS都将知道以前的值，而无需访问变量

<input class="spinner" type="number" data-prev-value="0" />

$('.spinner').on('change', (e) => {
  let direction = e.target.value > parseInt(e.target.dataset.prevValue) ? 'up' : 'down'
  e.target.dataset.prevValue = e.target.value;
  console.log(direction);
})

输入类型编号：如何检测值是递增还是递减？

3 个答案: