防止直接操作html5輸入數字字段

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

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