JavaScript:根据文本框中键入的值更改图像 [英] JavaScript: Change image based on value typed in a textbox

查看:139
本文介绍了JavaScript:根据文本框中键入的值更改图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想知道是否有办法使用JavaScript onChange事件根据表单上文本框中键入的数字更改图像的SRC。例如,如果用户键入以数字3开头的数字,我希望SRC指向一个图像,但如果用户键入一个以数字4开头的数字,我希望SRC指向一个不同的图像,当用户键入以5开头的数字或以6开头的数字时,我会喜欢其他SRC更改。

I'm wondering if there is a way to use a JavaScript onChange event to change the SRC for an image based on a number typed in a textbox on a form. For example, if the user types a number beginning with the number 3, I'd like to SRC to point to one image, but if the user types a number beginning with the number 4, I'd like the SRC to point to a different image, and I'd like other SRC changes when the user types a number beginning with 5, or a number beginning with 6.

提前致谢!

推荐答案

谢谢,谢谢你的帮助。

Thanks, all for your help.

:)

这是我开发的最终解决方案。我使用了onkeyup事件,因为它更适合我的需要。我使用的HTML:

Here is the final solution I developed. I used an onkeyup event, as it was better suited to my needs. The HTML I used:

    <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:

I added some case numbers to cover the numbers of the key pad, in addition to the numbers of the keyboard. Here is the JavaScript I used:

        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;
            }
        }
    }

这篇关于JavaScript:根据文本框中键入的值更改图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆