javascript 是否可以禁用输入类型编号中的“步骤”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30869720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to disable 'step' in input type number
提问by Arathi Sreekumar
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.
例如，当使用向上和向下递增/递减箭头/滚动步进等递增时，我想在它发生之前操纵步进过程。
eg:
例如：
<input type="number" min="1.01" max="1000" id="num"/>
I tried not giving a step attribute. This did not work.
我尝试不提供 step 属性。这没有用。
Step attribute only takes values 'all' and numbers, it does not take false.
Step 属性只取值 'all' 和 numbers，它不取假。
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.
所以我不能使用任何属性禁用它。我也尝试过使用 stepUp、stepDown 函数，但是当浏览器 step 函数发生时，它不会被调用。
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.
我尝试修改更改，但这似乎不适用于当前步骤，仅适用于下一步。
Here is the javascript:
这是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;
}
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.
在这里，如果我输入 5，它应该增加 5，但它增加 1。下次它增加 5。如果可能的话，我想在步进之前覆盖步长值。
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.
我不是试图通过使用文本输入来解决这个问题，而是试图确定是否有一种方法可以覆盖步进功能。
回答by Richard Hamilton
Not sure if this is what you're looking for but I'll give it a try.
不确定这是否是您要查找的内容，但我会尝试一下。
WebKit desktop browsers add little up down arrows to number inputs called spinners. You can turn them off visually like this:
WebKit 桌面浏览器向称为微调器的数字输入添加了很少的向上向下箭头。您可以像这样在视觉上关闭它们：
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Source: https://css-tricks.com/snippets/css/turn-off-number-input-spinners/
来源：https: //css-tricks.com/snippets/css/turn-off-number-input-spinners/
EDIT
编辑
Solved it! Here is the fiddle
解决了！这是小提琴
$(document).ready(function() {
$("input[type=number]").on("focus", function() {
$(this).on("keydown", function(event) {
if (event.keyCode === 38 || event.keyCode === 40) {
event.preventDefault();
}
});
});
});
