是否可以禁用输入类型编号中的“步骤”

我想知道是否可以覆盖浏览器步骤行为,或者在步骤之前拦截和更改步骤值,或者防止步进作为输入类型编号的函数发生。

例如,当使用向上和向下递增/递减箭头/滚动步进等递增时,我想在它发生之前操纵步进过程。

例如:

 

我试着不给步骤属性。 这没用。

Step属性只接受值’all’和数字,不带false。

所以我无法使用任何属性禁用它。 我也尝试过使用stepUp,stepDown函数但是当浏览器步骤函数发生时不会调用它。

我基本上想要它不要完全步进或者它是否步骤,然后执行自定义步骤function,其中我根据其当前值确定步长值。

我尝试修改更改,但这似乎不适用于当前步骤,仅适用于下一步。

这是javascript:

 $("#num").on("keyup change focusin focusout", function (e) { $(this).attr("step", getStep($(this).val())); }); function getStep (val) { val = parseFloat(val); var step = 1; if (val < 5) { console.log('here'); step = 2; } else if (val < 10) { step = 5; } return step; } 

http://jsfiddle.net/urrLmm4L/

在这里,如果我输入5,它应该增加5,但它增加1.下一次增加5.我想在步进之前覆盖步长值,如果可能的话。

我不是试图通过使用文本输入来解决这个问题,我试图确定是否有一种方法来覆盖步进function。

不确定这是否是您正在寻找的,但我会试一试。

WebKit桌面浏览器向称为微调器的数字输入添加很少的向上箭头。 您可以像这样在视觉上关闭它们:

 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 

资料来源: https : //css-tricks.com/snippets/css/turn-off-number-input-spinners/

编辑

解决了! 这是小提琴

http://jsfiddle.net/649d66bb/

  $(document).ready(function() { $("input[type=number]").on("focus", function() { $(this).on("keydown", function(event) { if (event.keyCode === 38 || event.keyCode === 40) { event.preventDefault(); } }); }); });