在驗證領域的主要輸入使用javascript

我使用在驗證領域的主要輸入使用javascript

document.getElementById('input-field').addEventListener('keyup', function (e) { 
    if (!String.fromCharCode(e.which).match(/[A-Za-z0-9,]/)) { 
    event.preventDefault(); 
    } 
});

它幾乎工作。問題是，我不能使用箭頭鍵，退格鍵，刪除CTRL + A等

我怎樣才能將其限制爲只有那些鍵，將給予在特定的輸入字符串表示？

來源

2016-10-14 Jamgreen

你爲什麼不驗證用戶輸入被提交後？ – HelpingHand

如果您驗證單個字符，您可以考慮在'keypress'上執行此操作。另外，最好使用'test'而不是'match'。 –

要忽略那些你需要確認你輸入之前加一個條件的密鑰。

例如你可以包含你想忽略，只是測試如果鍵入的是他們沒有一個人所有鍵碼列表的數組。

這裏有您需要什麼：

document.getElementById('input-field').addEventListener('keypress', function(e) { 
 
    //An array of special Keys 
 
    var specialKeys = [37, 38, 39, 40, 8, 13, 27, 46]; 
 
    if (specialKeys.indexOf(e.which) === -1) { 
 
    console.log(String.fromCharCode(e.which)+ ' Key is validated!'); 
 
    if (!String.fromCharCode(e.which).match(/[A-Za-z0-9,]/)) { 
 
     event.preventDefault(); 
 
    } 
 
    } 
 
});

<input type="text" id="input-field" placeholder="input text here">

注：

如您需使用keypress事件，而不是keyup立即驗證每個輸入的文字註釋中提到。

來源

2016-10-14 16:33:00

那麼有某種程度上限制你的輸入範圍。但我認爲在這種情況下，您正在尋找一種方法來識別僅可打印的關鍵事件。

您可以通過使用由@TimDown提出的解決方案（How to detect if the pressed key will produce a character inside an <input> text-box?）應用於keypress事件來實現此目的，如下面的代碼所示。那麼，你可以只使用可打印的關鍵事件。

function isCharacterKeyPress(evt) { 
 
     if (typeof evt.which == "undefined") { 
 
      // This is IE, which only fires keypress events for printable keys 
 
      return true; 
 
     } else if (typeof evt.which == "number" && evt.which > 0) { 
 
      // In other browsers except old versions of WebKit, evt.which is 
 
      // only greater than zero if the keypress is a printable key. 
 
      // We need to filter out backspace and ctrl/alt/meta key combinations 
 
      return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which != 8; 
 
     } 
 
     return false; 
 
    } 
 

 
    document.getElementById('input-field').addEventListener('keypress', function (e) { 
 
    \t if(isCharacterKeyPress(e)){ 
 
      if (!String.fromCharCode(e.which).match(/[A-Za-z0-9,]/)) { 
 
       e.preventDefault(); 
 
      } 
 
     } 
 
    });

<input type="text" id="input-field" placeholder="input text here">

來源

2016-10-14 15:49:58

在驗證領域的主要輸入使用javascript

回答

相關問題