Спасибо всем за помощь.
:)
Вот окончательное решение, которое я разработал. Я использовал событие onkeyup, так как оно лучше соответствовало моим потребностям. HTML-код, который я использовал:
<form name="AddCardToAccount" id="AddCardToAccount" action="" method="post">
<img id="imgCC" name="imgCC" class="imgCC" src="/includes/sci/images/imgNoCC_.gif">
<input type="text" name="cardNumber" id="cardNumber" size="31" onkeyup="handleKeypress(this,event);">
Я добавил несколько номеров корпусов, чтобы покрыть номера клавиатуры, в дополнение к номерам клавиатуры. Вот JavaScript, который я использовал:
function handleKeypress(inCardNumber,e) {
var inCardNumber = document.AddCardToAccount.cardNumber;
var imgToSwap = document.AddCardToAccount.imgCC;
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):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (49):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (50):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (51):
imgToSwap.src = "includes/sci/images/imgAmexCC_.gif";
break;
case (52):
imgToSwap.src = "includes/sci/images/imgVisaCC_.gif";
break;
case (53):
imgToSwap.src = "includes/sci/images/imgMcCC_.gif";
break;
case (54):
imgToSwap.src = "includes/sci/images/imgDiscCC_.gif";
break;
case (55):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (56):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (57):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (96):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (97):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (98):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (99):
imgToSwap.src = "includes/sci/images/imgAmexCC_.gif";
break;
case (100):
imgToSwap.src = "includes/sci/images/imgVisaCC_.gif";
break;
case (101):
imgToSwap.src = "includes/sci/images/imgMcCC_.gif";
break;
case (102):
imgToSwap.src = "includes/sci/images/imgDiscCC_.gif";
break;
case (103):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (104):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
case (105):
imgToSwap.src = "includes/sci/images/imgNoCC_.gif";
break;
}
}
}