jquery 检测输入数字中向上/向下按钮处的不同事件

bogh5gae  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(122)

是否有方法区分输入类型数字的事件向上/向下按钮?
我读到有一个change事件,但我想知道我是否可以识别按下的上/下按钮上的不同事件。
我会说得更清楚:

<input class="form-control" id="field" type="number" min="1" value="<VALUE>" onkeydown="return false">

个字符
我想要的:

$("#field").onUpPressed(function(e){ ... }
$("#field").onDownPressed(function(e){ ... }

xuo3flqw

xuo3flqw1#

没有默认事件。要使其工作,您需要存储以前的值,您可以使用data属性来完成,然后将其与新值进行比较,如下所示:

var $field = $("#field").on('input', function(e) {
  var newVal = parseInt($field.val(), 10);
  var oldVal = $field.data('old');
  
  console.log(newVal > oldVal ? 'up' : 'down');
  
  $field.data('old', newVal);
});

$field.data('old', $field.val());

个字符

juzqafwq

juzqafwq2#

我能找到的最好的方法是确定用户是否在显示数字的type=“number”字段中单击,而不是在显示数字的type =“number”字段中单击。在Chrome 114中的浏览器生成的“webkit-inner-spin-button / webkit-inner-spin-button”(其中这些样式未在暴露给JS的目标中列出)上确定偏移量:

let proceed = true
if (event.target.matches('input[type="number"]')) {
  var numberField = event.target
  var fieldBound = numberField.getBoundingClientRect()
  if (event.clientX > fieldBound.left + numberField.offsetWidth - 20) {
    proceed = false // Clicked on incrementor buttons
  }
}
// Take an action when the proceed = true

字符串
只是张贴在这里供将来参考。

相关问题