是否可以禁用输入类型编号中的“步骤” [英] Is it possible to disable 'step' in input type number

问题描述

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

I would like to know if its possible to override the browser step behaviour or to intercept and change the step value before steping or prevent stepping from happening as a function for input type number.

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

For example when incrementing using up and down increment/decrement arrows/scroll stepping etc, I would like to manipulate the stepping process before it happens.

例如：

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

我尝试不给步骤属性。这不起作用。

I tried not giving a step attribute. This did not work.

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

Step attribute only takes values 'all' and numbers, it does not take false.

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

So I cannot disable it using any attributes. I also tried over riding the stepUp, stepDown functions but that does not get called when the browser step function is happening.

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

I basically want it either to not step at all or if it does step, then do a custom step function, in which I decide the step value based on its current value.

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

I tried modifying on change, but this does not seem to work for the current step, only for the next step.

这是javascript：

Here is the 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.我想在步进之前覆盖步长值，如果可能的话。

Here if I enter 5 it should increment by 5, but it increments by 1. Next time it increments by 5. I want to override the step value before stepping if possible.

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

I am not trying to solve this by using a text input, I am trying to identify whether there is a means to override the stepping function.

推荐答案

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

Not sure if this is what you're looking for but I'll give it a try.

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

WebKit desktop browsers add little up down arrows to number inputs called spinners. You can turn them off visually like this:

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

});

这篇关于是否可以禁用输入类型编号中的“步骤”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！