數字輸入驗證

我正在驗證input type ='text'元素。我已經連接'粘貼'和'keydown'事件來捕獲輸入並將其限制爲數字。 keydown似乎沒有任何障礙，但是，我似乎無法讓任何瀏覽器實際上不粘貼文本到字段中（我看到有一個beforepaste事件，可能是票 - 但它看起來不支持firefox。最後，我導致只是消隱輸入，如果該值不是一個數字。這會導致瞬間閃爍，但似乎工作。數字輸入驗證

是否有更乾淨的方法來做到這一點？我失去了一些東西？反正是有防止閃爍？我知道HTML5有一個類型=「號」，但我還沒準備好去那裏。

<input type="text" id="number" /> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     enableNumericOnlyEntry("#number"); 

     function enableNumericOnlyEntry(object) { 
      $(object).bind('paste', numericOnlyPaste); 
      $(object).bind('keydown', null, numericOnlyKeyDown); 

      function numericOnlyPaste(event) { 
       var inputText = ""; 
       var element = event.target; 
       setTimeout(function() { 
        var text = $(element).val(); 
        if (isNaN(text)) { 
         $(element).val("") 
         return false; 
        } 
       }, 0); 
      } 

      function numericOnlyKeyDown(event) { 
       // Allow: backspace, delete, tab, escape, and enter 
       if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
        // Allow: Ctrl+A/a 
        (event.keyCode == 65 || event.keyCode == 97) && (event.ctrlKey === true) || 
        // Allow: Ctrl+C/c 
        (event.keyCode == 67 || event.keyCode == 99) && (event.ctrlKey === true) || 
        // Allow: Ctrl+V/v 
        (event.keyCode == 86 || event.keyCode == 118) && (event.ctrlKey === true) || 
        // Allow: Ctrl+X/x 
        (event.keyCode == 88 || event.keyCode == 120) && (event.ctrlKey === true) || 
        // Allow: home, end, left, right 
        (event.keyCode >= 35 && event.keyCode <= 39)) { 
        // let it happen, don't do anything 
        return true; 
       } 
       else { 
        // Ensure that it is a number and stop the keypress 
        if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) { 
         return false; 
        } 
       } 
      } 
     } 
    });

來源

2013-06-24 codechurn

並不是很多瀏覽器都支持它，但HTML5的輸入數字類型就像這樣。爲了向後兼容，您仍然需要這樣做，但至少您可以利用更新的功能。 – qw3n

我用這個項目要創建一個掩碼爲編輯框的字段，您可以刪除聯合國對它也是如此，所以它看起來不像一個蒙面編輯。真的很容易使用：http://digitalbush.com/projects/masked-input-plugin/

然後你會使用類似$（「＃box」）。mask（「9999999」）;和你的好去，工作很好！

來源

2013-06-24 03:31:30

HTML5的<input type="number">真的是你想要去的地方。如果你正在使用支持它的瀏覽器（基本上除了Safari和舊版IE以外的其他瀏覽器），它可以完成你想要的任何事情。

也就是說，爲什麼不註冊一個onpaste處理程序，以便您可以在用戶粘貼後將粘貼的內容減少爲數字？

來源

2013-06-24 03:41:14 SteelPangolin

對'type =「number」的支持比現在更加多變：http://caniuse.com/#feat=input-number。 Safari（桌面）確實支持它，但Firefox不支持。雖然，有一個[着名]（https://github.com/h5bp/html5please/blob/master/posts/input-number.md）polyfill可用。 –

他正在嘗試類似這樣的選項，說onpaste正在閃爍，並想要type ='number'以外的東西，認爲面具編輯將是最好的方式去爲他，他們的工作就像一個魅力。 –

數字輸入驗證

回答

相關問題