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

Question

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

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

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

我该怎么做？

Answer 1

jsFiddle：http: //jsfiddle.net/ksHa2/12/

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

Answer 2

您应该处理keyupandinput事件。