防止在欄位中輸入無效字元：綜合指南

Question

Onkeydown，我執行以下 JavaScript：

function ThisOnKeyDown(el) {
   if (el.title == 'textonly') {
       !(/^[A-Za-zÑñ-s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ-s]/ig, '') : null;
   }
   if (el.title == 'numbersonly') {
       !(/^[0-9]*$/i).test(el.value) ? el.value = el.value.replace(/[^0-9]/ig, '') : null;
   }
   if (el.title == 'textandnumbers') {
       !(/^[A-Za-zÑñ0-9-s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ0-9-s ]/ig, '') : null;
   }
}

這三個標題屬性之一被賦予頁面上的各個輸入欄位。只要正確刪除無效字符，該代碼就可以工作，但直到輸入下一個字符為止。我想找到一種方法來簡單地拒絕無效輸入。感謝您的幫忙！

編輯：我在全球創建事件。我是這樣做的：

function Globalization() {
      var inputs = document.getElementsByTagName('input');
      for (i = 0; i < inputs.length; i ) {
          inputs[i].onfocus = createEventHandler(
              ThisOnFocus, inputs[i]);
          inputs[i].onblur = createEventHandler(
              ThisOnBlur, inputs[i]);
          inputs[i].onkeydown = createEventHandler(
              ThisOnKeyDown, inputs[i]);
          inputs[i].onkeyup = createEventHandler(
              ThisOnKeyUp, inputs[i]);
      }
  }

全球化()運行body.onload

因此，典型的輸入欄位具有 HTML，沒有像這樣的函數呼叫：

<input id="AppFirstName" style="width: 150px;" type="text" maxlength="30" title="textonly"/> ;

Answer 1

上面的程式碼確實說明了這一點——只允許數字。您可以透過新增異常來修改它，例如像這樣的 BACKSPACE

    
        
        
        sssccc
        
    
        
    

Answer 2

為了防止它首先被設置，您可以在 keydown 事件處理程序上傳回 false，從而防止事件進一步傳播。

我使用 jQuery 編寫了下面的範例，但是您可以在傳統綁定時使用相同的函數。

儘管在伺服器端驗證也很重要，但為了使用者友善性，客戶端驗證也很重要。

$("input.number-only").bind({
    keydown: function(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    }
});