2012-01-24 69 views
4

我已經編寫了一些僅接受文本框中的數字輸入的JavaScript和jQuery代碼。 但這還不夠;我需要限制輸入到某些數字。使用JavaScript來僅允許HTML輸入中的特定字符

此文本框需要處理SSN號碼(瑞典SSN),它必須以19或20開頭。我想迫使它以這些數字開始,但我無法設法限制它。

 $('input.SSNTB').keydown(function (event) { 
      var maxNrOfChars = 12; 
      var ssnNr = $('input.SSNTB').val();   
     if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || 
     // Allow: Ctrl+A 
     (event.keyCode == 65 && event.ctrlKey === true) || 
     // Allow: home, end, left, right 
     (event.keyCode >= 35 && event.keyCode <= 39)) { 
      // let it happen, don't do anything    
      return; 
     } 
     else {    
      // Ensure that it is a number and stop the keypress 
      if (((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105))) { 
       console.log("if-1"); 
       event.preventDefault(); 
      } 
      if (event.shiftKey == true) { 
       console.log("if-3"); 
       event.preventDefault(); 
      } 
      //rules to make sure the textbox starts with correct number     
      if (event.keyCode != 49 || event.keyCode != 50 || event.keyCode != 97 || event.keyCode != 98) { 
       console.log("if-4, Keycode:" + event.keyCode); 
       event.preventDefault(); 
      } 
     } 
    }); 

最後一個if-case被執行到測試它。它按計劃執行,但不會限制輸入字符的內置。

任何提示或想法?

+1

你認爲RegEx是否存在這個問題?我相信你會從它得到一個更清潔的代碼... :) – FarligOpptreden

+2

我建議你不要試圖讓你的'keydown'處理程序如此奇特 - 你不能限制在開始的字符該字符串,除非你可以告訴光標在哪裏。只要將其限制爲可以出現在字符串中任何位置的字符,然後使用'change'和/或'blur'處理程序來驗證使用正則表達式的整體格式 - 這也將允許用戶粘貼,剪切或拖動' n'drops(所有這些都可以在不觸發'keydown'的情況下完成)。 – nnnnnn

+0

SSN有9位數字,即使是連字符,字符串也不應超過11個字符。爲什麼maxNrOfChars設置爲12? – Abbas

回答

3

您可以使用正則表達式來限制用戶只輸入數字和破折號。使用正則表達式的優點是用戶可以更自然地與輸入交互,例如他們可以粘貼到文本輸入,它將被成功驗證:

//bind event handler to the `keyup` event so the value will have been changed 
$('.SSNTB').on('keyup', function (event) { 

    //get the newly changed value and limit it to numbers and hyphens 
    var newValue = this.value.replace(/[^0-9\-]/gi, ''); 

    //if the new value has changed, meaning invalid characters have been removed, then update the value 
    if (this.value != newValue) { 
     this.value = newValue; 
    } 
}).on('blur', function() { 

    //run some regex when the user un-focuses the input, this checks for the number ninteen or twenty, then a dash, three numbers, a dash, then four numbers 
    if (this.value.search(/[(20)(19)](-)([0-9]{3})(-)([0-9]{4})/gi) == -1) { 
     alert('ERROR!'); 
    } else { 
     alert('GOOD GOING!'); 
    } 
}); 

這裏是一個演示:http://jsfiddle.net/BRewB/2/

注意.on()是jQuery 1.7中的新增功能,在這種情況下與使用.bind()相同。

0

以爲我會張貼落下帷幕的解決方案。我實際上保留了上面發佈的類似代碼,並且沒有將其隱藏到RegExp中。所做的是在關注此文本框後驗證數字是否丟失。這是不可能的,用戶將被通知並被迫填寫有效的號碼。

$('input.SSNTB').focusout(function() { 
    var ssnNr = $('input.SSNTB').val(); 
    var ssnNrSub = ssnNr.substring(0, 2); 
    //console.log(ssnNrSub); 

    //checks for correct lenggth 
    if (ssnNr.length < 12) { 
     $('div.SSNHelp label.Help').html('SSN to short. Please fill in a complete one with 12 numbers'); 
     setTimeout(function() { 
      $('input.SSNTB').focus(); 
     }, 0); 
     validToSave = false; 
     return; 
    } 

    //checks so it starts correct 
    if (ssnNrSub != "19" && ssnNrSub != "20") { 
     $('div.SSNHelp label.Help').html('The SSN must start with 19 or 20. Please complete SSN.'); 
     setTimeout(function() { 
      $('input.SSNTB').focus(); 
     }, 0); 
     validToSave = false; 
     return; 
    } 

    $('div.SSNHelp label.Help').html(''); 
    validToSave = true; 
    }); 

適合我。 :]

相關問題