是否可以在输入类型号中禁用“步骤”[重复]

Question

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

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

例如：

<input type="number" min="1.01" max="1000" id="num"/>

我尝试不提供 step 属性。这不起作用。

Step 属性只取值 'all' 和 numbers，它不取 false。

所以我不能使用任何属性禁用它。我也尝试过使用 stepUp、stepDown 函数，但是当浏览器 step 函数发生时，它不会被调用。

我基本上希望它要么根本不步进，要么如果它确实步进，然后执行自定义步进函数，在该函数中我根据其当前值决定步进值。

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

这里是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。如果可能，我想在步进之前覆盖步长值。

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

Answer 1

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

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();
            }
        });
    });

});