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

Updating credit card logos based on user input via JavaScript

本文关键字：更新 信用卡 输入 用户 JavaScript 通过      更新时间：2023-09-26

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

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

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

我应该怎么做？

您应该处理keyup和input事件。

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>
​
相关文章：