Question

我正在为我的移动网站创建信用卡页面。我希望只要输入数字，例如5，输入框中的图像应为maestro-card，输入4将图像更改为其他卡的图像，依此类推。就像Clear Trip移动网站一样。

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

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

我该怎么做？

Answer 1

您应该处理keyup和input事件。

Answer 2

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>

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

2 个答案: