Javascript to identify card number

Question

I'm using a piece of JavaScript code to identify what type of credit card number a user enters. I don't know much about JavaScript and am using code found on the web. I've gotten it to work with no issue, but I was hoping someone could explain to me why a specific part works the way it does.

When a user starts to enter the credit card number, the value that gets used by the JavaScript function isn't the same as the number. For example, when I enter a 3, the charCode variable is 51. I'm just trying to understand how I get from 3 to 51 so I can use this function for additional card types.

JAVASCRIPT:

<script type="text/javascript">
function handleKeypress(inCardNumber,e) {
    var inCardNumber = document.form.cardNumber;

    var charCode;
    if(e && e.which) {
        charCode = e.which; // For Firefox
    }
    else if(window.event){
        e = window.event;
        charCode = e.keyCode; // For IE
    }

    if (inCardNumber.value.length === 1) { 
        switch (charCode) {
        case (48):
            swapVISA.src = "/images/icons/payments/VISA-dim.png";   
            break;
        case (49):
            swapVISA.src = "/images/icons/payments/VISA-dim.png";
            break;


etc

HTML

onkeyup="handleKeypress(this,event);"

Answer 1

Character codes are just a representation of a key, they are just a standard of which code corresponds to what keystroke, so don't think too much about them. Just remember that every key on your keyboard has a character code associated with it.

Here's a list of char codes as well as an interactive tool to test them out: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

As UweB pointed out, get the actual character from a code like this:

var theChar = String.fromCharCode(charCode);

Answer 2

See the colorful tables at the end of this page for ASCII id list. And here too.

But I suggest reading all pages.

Brief explanation:

There's a Map of ASCII ID's which each key in your keyboard is assigned to. So Enter is 13, Esc 27 and so on.

Answer 3

This is due to the character 3's ASCII value (ASCII is a widely-used way for computers to numerically represent various common characters). If you look under the ASCII printable characters section of that Wikipedia article, you'll see that the Glyph (or character) 3 has a Dec value of 51. You can see the dec values of other common printable characters in that same table.

Remember that when you press the 3 key on your keyboard, the computer is going to see the character 3, and not a raw integer value of 3. The Glyph column of that table represents the character value, and the Dec column represents the raw integer value representing that character in the ASCII scheme. You can also see the Binary representation in that table, which is what the Dec integer value breaks down to for how a computer actually handles that value on the lowest level.

In your code, the charCode variable is being assigned the dec value of the keystroke (via e.which or e.keyCode, where e looks to be the base JavaScript Event object), which is of type Number. This is why the switch further down in the code is comparing charCode against numerical values.

You can switch between characters and their dec values in JavaScript with the fromCharCode() and charCodeAt() functions.

Answer 4

The value 51 is the Unicode (or ASCII if that's easier to understand) value for the character "3". See this question for more info: JavaScript KeyCode vs CharCode.

So in other words you are not getting a string object in charCode.

Answer 5

You're getting the ascii char code in the event. You can get the actual character through

var theChar = String.fromCharCode(charCode);