JavaScript: изменение изображения на основе значения, введенного в текстовое поле - PullRequest
Новая
       14

JavaScript: изменение изображения на основе значения, введенного в текстовое поле

0 голосов
/ 04 декабря 2011

Мне интересно, есть ли способ использовать событие JavaScript onChange, чтобы изменить SRC для изображения на основе числа, введенного в текстовое поле в форме.Например, если пользователь вводит число, начинающееся с цифры 3, я хотел бы, чтобы SRC указывал на одно изображение, но если пользователь вводит число, начинающееся с цифры 4, я хотел бы, чтобы SRC указывал надругое изображение, и я хотел бы, чтобы другие SRC менялись, когда пользователь вводит число, начинающееся с 5, или число, начинающееся с 6.

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 07 декабря 2011

Спасибо всем за помощь.

:)

Вот окончательное решение, которое я разработал. Я использовал событие 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;
            }
        }
    }
0 голосов
/ 04 декабря 2011

Ниже я привел полностью прокомментированный пример того, как это можно сделать.

html 

<input id="myid" type="text">
<img id="myimg" src="http://dummyimage.com/100x100/000/fff">

javascript 

window.onload = function() { // because we are grabbing DOM elements we need to ensure the elements are first loaded.
    var elm = document.getElementById("myid"),
        img = document.getElementById("myimg"); // here we grab the input box and the image
    elm.onkeyup = function(event) { // capture the input keyup
        if (this.value.length === 1) { // make sure we are only checking the first value
            switch (event.keyCode) { // here we are running the switch statement against the keyup event keycode value
            case (48): 
                img.src = "http://dummyimage.com/100x100/000/fff&text=0";
                break;
            case (49):
                 img.src = "http://dummyimage.com/100x100/000/fff&text=1";
                break;
            case (50):
                 img.src = "http://dummyimage.com/100x100/000/fff&text=2";
                break;
            case (51):
                 img.src = "http://dummyimage.com/100x100/000/fff&text=3";
                break;
            case (52):
                 img.src = "http://dummyimage.com/100x100/000/fff&text=4";
                break;
            case (53):
                 img.src = "http://dummyimage.com/100x100/000/fff&text=5";
                break;
            case (54):
                 img.src = "http://dummyimage.com/100x100/000/fff&text=6";
                break;
            case (55):
                 img.src = "http://dummyimage.com/100x100/000/fff&text=7";
                break;
            case (56):
                 img.src = "http://dummyimage.com/100x100/000/fff&text=8";
                break;
            case (57):
                 img.src = "http://dummyimage.com/100x100/000/fff&text=9";
                break;
            }
        }
    }

}
...