根據通過JavaScript輸入的用戶信息更新信用卡標識

我正在爲我的移動網站創建信用卡頁面。我希望當我輸入數字時，比如說5，輸入框中的圖像應該是maestro-card，輸入4會將圖像更改爲某個其他卡的圖像，等等。就像Clear Trip移動網站一樣。根據通過JavaScript輸入的用戶信息更新信用卡標識

我使用了JavaScript的onkeypress事件，但它在文本框中沒有值時收到一個動作。

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

我應該怎麼做？

來源

2012-05-02 hkasera

既然你問，而基本的東西，我真的希望你不會提示用戶的信用卡號，太。 – ThiefMaster

您應該處理keyup和input事件。

來源

2012-05-02 15:29:51 SLaks

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

來源

2012-05-02 15:35:35

我想要改變發生，因爲我輸入數字。在你的情況下，當我輸入1我應該得到那個圖像，而不是當文本框離開焦點！ – hkasera

您可能需要閱讀[我的答案]（http://stackoverflow.com/a/10029116/1048572）上的「替代一百萬個IF語句」的問題......您的函數在一行中：'document.getElementById（ 'img'）。src =「http://www.google.com/logos/2012/」+ [「ramon_y_cajal-2012-hp」，「queensday12-hp」，「queensday12-hp」，「laborday12-hp」 ] [object.value.length-1] +「.jpg」;' – Bergi

根據通過JavaScript輸入的用戶信息更新信用卡標識

回答

相關問題