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

【问题标题】：Prevent direct manipulation of html5 input number field防止直接操作html5输入数字字段
【发布时间】：2014-10-15 23:39:09
【问题描述】：

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

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

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

我尝试设置readonly="true"，但正如预期的那样，这也使用户无法使用向上和向下箭头按钮循环浏览数字。

【问题讨论】：

它们是<input type="number"/> 元素的向上和向下箭头按钮。它们不是向上和向下箭头键。

标签： javascript html validation input

【解决方案1】：

你可以试试

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

但无论如何，您必须检查服务器端的值！

【讨论】：

如果他的意思是“使用键盘上下箭头”，我宁愿使用函数而不是 return false;所以他可以检查按下的键是向上还是向下，如果不是，则返回 false
他说的是“向上和向下箭头按钮”而不是“键”。我很确定他指的是type="number"field 的箭头。无论如何，你有一个观点：通过功能，他可以更精确地检查用户交互，但在所有设备（包括移动设备）上测试功能并没有那么痛苦。
完全同意！

【解决方案2】：

除非是箭头键，否则您可以在按键上调用 preventDefault：

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

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

这里是 jsfiddle 来演示。如果您不关心键盘上的箭头键，那么您可以省略该部分检查，而在任何按键上都使用 preventDefault。

【讨论】：

【解决方案3】：

event.preventDefault 与 return 相比是一项昂贵的操作，所以 jsbin_example

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

【讨论】：

除非在 jQuery 事件处理程序中，否则 return false 除外