Question

我有一个输入：

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

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

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

Answer 1

您是否有理由避免使用下拉select标记？这将为用户提供非常有限的数字选择（根据您的喜好设置）。您甚至可以使用PHP或JavaScript使用数字1到100（或您选择的任何数字）填充<option>字段，这样您就不必在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/

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

Answer 3

用户期望能够键入字段，作为一个选项。虽然可以部分地防止这种情况（即当启用JavaScript并且代码中的事件处理程序覆盖用户可能使用的方式时），但是当您特别不希望获得其基本功能时，使用该元素是没有意义的。

如果您只想允许两个值4和6（如您的示例所示），并且您希望阻止用户只是输入其中一个，那么您应该使用select元素或一套两个单选按钮。

Answer 4

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

下面的代码确保允许的值仅在指定的最小和最大属性之间该代码正在使用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)
    }

});

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

5 个答案: