通过JavaScript根据用户输入更新信用卡徽标

我正在为我的手机网站创建一个信用卡页面。我想，一旦我输入数字，比如说，5，输入框中的图像应该是maestro卡，输入4将图像更改为其他卡的图像，依此类推。就像Clear Trip移动站点一样

我使用了JavaScript的onkeypress事件，但当文本框中没有值时，它会收到一个操作

    <input type="text" size="20" autocomplete="off" style="width:80%"  onkeypress="func();"/> <div class="card-img"></div>

---

我应该怎么做？

您应该处理

键控

和

输入

事件。

jsidle:

函数更新（对象）
{
if（object.value.length==1）
{
document.getElementById（'img'）。src=”http://www.google.com/logos/2012/ramon_y_cajal-2012-hp.jpg";
}
else if（object.value.length==2）
{
document.getElementById（'img'）。src=”http://www.google.com/logos/2012/queensday12-hp.jpg";
}
else if（object.value.length==3）
{
document.getElementById（'img'）。src=”http://www.google.com/logos/2012/queensday12-hp.jpg";
}
其他的
{
document.getElementById（'img'）。src=”http://www.google.com/logos/2012/laborday12-hp.jpg";
}
}
​

由于您询问的是非常基本的问题，我真的希望您不要提示输入用户的信用卡号码。我希望在输入号码时发生更改。在您的情况下，当我输入1时，我应该得到该图像，而不是当文本框失去焦点时！您可能需要阅读关于“百万IF语句的替代方案”的问题。。。一行中的函数：

document.getElementById（'img'）.src=”http://www.google.com/logos/2012/“+[“ramon_y_cajal-2012-hp”、“queensday12 hp”、“queensday12 hp”、“Laboraday12 hp”][object.value.length-1]+”.jpg”
<div class="card-img"><img id="img" src="http://www.google.com/logos/2012/laborday12-hp.jpg"/></div>

<input type="text" size="20" autocomplete="off" style="width:80%" onkeydown="update(this);" onchange="update(this);"/>

<script>
    function update( object )
    {
        if ( object.value.length == 1 )
        {
            document.getElementById('img').src = "http://www.google.com/logos/2012/ramon_y_cajal-2012-hp.jpg";
        }
        else if ( object.value.length == 2 )
        {
            document.getElementById('img').src = "http://www.google.com/logos/2012/queensday12-hp.jpg";
        }
        else if ( object.value.length == 3 )
        {
            document.getElementById('img').src = "http://www.google.com/logos/2012/queensday12-hp.jpg";
        }
        else
        {
            document.getElementById('img').src = "http://www.google.com/logos/2012/laborday12-hp.jpg";
        }
    }
</script>
​