Question

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

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

例如：

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

我尝试不提供步骤属性。这没用。

Step属性只接受值'all'和数字，不带false。

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

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

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

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

});

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

1 个答案: