2015-12-11 5 views
0

Для создания кредитной карты используется следующий код. Моя единственная проблема заключается в том, что auto tabbing не работает для моего текстового поля с идентификатором card.i есть внешний файл для автоматической табуляции, и я добавил код под кодом html. Спасибо заранее. auto tabbing on the first textbox is not working

<head> 
    <title>Credit Card</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
    <script src="jquery.autotab.js"></script> 
    <script src="Jstepper.js"></script> 
    </head> 
    </body oncopy="return false" oncut="return false" onpaste="return false"> 
    <style> 
    #Month{ 
    width: 20px; 
    } 
    #Year{ 
    width: 40px; 
    } 
    #Cvc{ 
    width: 30px; 
    } 
    </style> 
    <p>Payment: 
     Credit card<input type="radio" id='radio_1' name='payment' value="credit"> 
      <div class="text1"> 
      <form name="cardForm" method="post"> 
       <p>Card number:<input type="text" name="FirstField" id='card' value="" 
       onKeyup="autotab(this,document.cardForm.SecondField)" maxlength=16 > 
       Expiration: Month:-<input type="text" name="SecondField" id='Month' value="" 
       onKeyup="autotab(this,document.cardForm.ThirdField)" maxlength=2 > 
       Year:-<input type="text" id='Year' name="ThirdField" value="" onKeyup="autotab(this, document.cardForm.FourthField)"maxlength=4></p> 
       3 digit CVC:-<input type="text" name="FourthField" id='Cvc' value="" maxlength=3></p> 
      </form>  
      </div>  

    </body> 
    <!--Jump when expiration number is typed--> 
    <!--month and year--> 
    <!--exp date has to greater than or equal to current date --> 
    <!--on every keypress check if the length is 16--> 
    <!--macthes--> 
    <!-- Import numeric from src folder--> 
     <script src="numeric.js"></script> 
    <script> 
    //autotab doesnt work for the first feild 
    //can still copy and paste text 
     $(document).ready(function() { 
     $(".text1").hide(); 
      $("#radio_1").click(function() { 
        <!--passes card id to keypress function--> 
        $('#card').keypress(); 
        //disable copy and paste 
        $('#card').bind(); 
        $('#Month').keypress(); 
        $('#Month').bind(); 
        $('#Month').jStepper({minValue:0, maxValue:12}); 

        $('#Year').keypress(); 
        $('#Year').bind(); 

        $('#Cvc').keypress(); 
        $('#Cvc').bind(); 
        $(".text1").show(); 
       }); 
      }); 

    </script> 

<html> 

/* 
Auto tabbing script- By JavaScriptKit.com 
http://www.javascriptkit.com 
This credit MUST stay intact for use 
*/ 

function autotab(original,destination){ 
if (original.getAttribute&&original.value.length==original.getAttribute("maxlength")) 
destination.focus() 
} 
+0

Просто пост соответствующий код здесь и создать jsfiddle пожалуйста –

ответ

0
my isnumeric file 
$(this).keypress(function (e) { 
    //if the letter is not digit then display error and don't type anything 
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { 
     return false; 
    } 
}); 


//check for the type of credit card and prints to console 
$(this).keypress(function (e) { 
var input = document.getElementById('card'); 
input.onkeyup = function() { 
    if(input.value.length == 16){ 

    var str = input.value; 

    var VisaRegx = /^4[0-9]{6,}$/i; 
    var Visafound = str.match(VisaRegx); 
    if(Visafound != null){ 
     console.log("Visa Found"); 
    } 

    var MasterRegx = /^5[1-5][0-9]{5,}$/i; 
    var Masterfound = str.match(MasterRegx); 
    if(Masterfound != null){ 
     console.log("Master Card Found"); 
    } 
    var AmericanExpressRegx = /^3[47][0-9]{5,}$/i; 
    var AmericanExpressfound = str.match(AmericanExpressRegx); 
    if(AmericanExpressfound != null){ 
     console.log("American Express Card Found"); 
    } 
    //^(?:2131|1800|35[0-9]{3})[0-9]{3,}$ 
    var DinersClubRegx = /^3(?:0[0-5]|[68][0-9])[0-9]{4,}$/i; 
    var DinersClubfound = str.match(DinersClubRegx); 
    if(DinersClubfound != null){ 
     console.log("Diners Club Card Found"); 
    } 
    var DiscoverRegx = /^6(?:011|5[0-9]{2})[0-9]{3,}$/i;  
    var Discoverfound = str.match(DiscoverRegx); 
    if(Discoverfound != null){ 
     console.log("Discover Card Found"); 
    } 
    var JcbRegx = /^(?:2131|1800|35[0-9]{3})[0-9]{3,}$/i; 
    var Jcbfound = str.match(JcbRegx); 
    if(Jcbfound != null){ 
     console.log("Jcb Card Found"); 
    } 
     } 
    } 
}); 
//checks for credit card expiration 
$(this).keypress(function (e) { 
    var Monthinput = document.getElementById('Month').value; 
    var Yearinput = document.getElementById('Year').value; 
    var today = new Date(); 
    var mm = today.getMonth()+1; //January is 0! 
    var yyyy = today.getFullYear(); 
     if(Yearinput.length == 4){ 
    if(yyyy > Yearinput){ 
     console.log("The card is expired cause of the year"); 
    } 
     } 
    if(Yearinput.length == 4 && Monthinput.length == 2){ 
    if(yyyy == Yearinput && mm > Monthinput){ 
     console.log("The card is expired cause of the current month"); 
     } 
    } 


}); 
//Disable copy and paste 
$(this).bind("cut copy paste",function(e) { 
    e.preventDefault(); 
});