Question

我创建了一个html5输入数字字段，如下所示：

<input type="number" min="1" max="51" value="1"/>

现在我希望用户能够使用向上和向下箭头按钮循环显示数字。但是我不希望用户能够在该字段中直接输入新号码。我该怎么做？

我尝试设置readonly="true"，但正如预期的那样，这也禁用了用户使用向上和向下箭头按钮循环显示数字的功能。

Answer 1

您可以尝试使用

<input type="number" min="1" max="51" value="1" onkeydown="return false"; />

但是你必须检查服务器端的值！

Answer 2

你可以在按键上调用preventDefault，除非它是箭头键：

var numInput = document.getElementsByTagName('input')[0];

numInput.addEventListener('keypress', function (event) {
    if (event.keyCode !== 38 && event.keyCode !== 40) {
      event.preventDefault();
    }
});

这是要展示的jsfiddle。如果您不关心键盘上的箭头键，那么您可以省略检查的那一部分，只需在任何按键上阻止默认。

Answer 3

与返回jsbin_example

相比，

event.preventDefault是一项代价高昂的操作

<input type="number" min="1" max="51" value="1"/>



      $("input").on("keydown",function update(event)
{
   var keyCod,
   srcObj = event.src||event.originalTarget||event.target;
   if(event.keycode || event.which)
      {
         keyCod = event.keycode || event.which;
      }
      else
     {
        keyCod = event;
     }
     if(!(keyCod  == 38 || keyCod  == 40))
     {
         return false;

      }
  console.log('after false');
      if(keyCod == 38)
      {
         srcObj.value = parseInt(srcObj.value)+1;
      }
      if(keyCod == 40)
      {
         srcObj.value = parseInt(srcObj.value)-1;
      }
});

防止直接操作html5输入数字字段

3 个答案: