css - 有没有办法在 type=number 中停止手动输入，但仍然允许使用“向上/向下”按钮进行更改？

Question

我有一个输入：

<input type="number" name="amount" min="4" max="6" step="2" value="4" id="amount" />

而且我没有正常的提交按钮来提交信息（使用 javascript）。

type=number 工作正常，但用户仍然可以输入他们想要的任何数字，我想阻止用户输入输入，但仍然允许使用 type= 出现的“向上/向下”箭头进行更改数字。我试过研究，但找不到任何东西。这甚至可能吗？

Answer 1

您是否有任何理由避免使用下拉select标签？这将为用户提供非常有限的数字选择（根据您的喜好设置）。您甚至可以<option>使用 PHP 或 JavaScript 用数字 1 到 100（或任何您选择的数字）填充字段，这样您就不必在 HTML 代码中手动键入每个数字。

<select>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>

Answer 2

编辑以阻止复制/粘贴：

<script type="text/javascript">
document.getElementById('amount').onkeypress = function(e) { e.preventDefault(); };

document.getElementById('amount').onkeydown = function(e) {
    if(e.keyCode != 38 && e.keyCode != 40)
        e.preventDefault();
};

if(document.addEventListener)
    document.getElementById('amount').addEventListener('contextmenu',function(e) { e.preventDefault();
},false);
</script>

http://jsfiddle.net/Wh5Ms/2/

然后，您可以<noscript>为关闭 JavaScript 的用户添加标签并向他们显示<select>元素等。

Answer 3

作为一种选择，用户应该能够在该字段中输入内容。尽管可以部分防止这种情况发生（即当启用 JavaScript 并且代码中的事件处理程序涵盖了用户可能使用的方式时），但当您特别不想获得其基本功能时，使用该元素是没有意义的.

如果您只想允许两个值 4 和 6，就像从您的示例中看到的那样，并且您想阻止用户简单地输入其中一个，那么您应该使用一个select元素或一组两个单选按钮。

Answer 4

虽然我不确定 step 属性的作用，但很确定您可以在下面的代码中找到根据您的要求使用它的方法

下面的代码确保允许的值介于仅指定的 min 和 max 属性之间。代码使用 jquery 1.10 及以后版本。

var prevVal = 0;
$("input[type=number]").on("keydown", function(e){
    prevVal = Number($(this).val());
});
$("input[type=number]").on("keyup", function(e){
   var minVal = $(this).attr("min");
    var maxVal = $(this).attr("max");
    var step= $(this).attr("step");
    var currentVal = $(this).val();
    if(!(currentVal<=maxVal&&currentVal>=minVal)){
        $(this).val(prevVal)
    }

});

Answer 5

大佬试试，我的问题解决了

var prevVal = 0;
$("input[type=number]").on("keydown", function(e){
    prevVal = Number($(this).val());
});
$("input[type=number]").on("keyup", function(e){
   var minVal = $(this).attr("min");
    var maxVal = $(this).attr("max");
    var step= $(this).attr("step");
    var currentVal = $(this).val();
    if(!(currentVal>=1)){
        $(this).val(1)
    }

});