Question

我需要一个html表单，如果我们键入一个以“3”开头的数字的字段，则应显示图像“visa”，如果以9开头，则会显示mastercard。可以使用java脚本，但我不知道如何。有人可以帮助我。

function handleEvent(event)
{
  var value   = event.target.value,    
      type    = getCreditCardType(value);

  switch (type)
  {
    case "mastercard":
        //show MasterCard icon
        break;

    case "visa":
        //show Visa icon
        break;

    case "amex":
        //show American Express icon
        break;

    default:
        //clear all icons?
        //show error?
  }
}

// or window.onload
document.addEventListener("DOMContentLoaded", function(){
  var textbox = document.getElementById("cc-num");
  textbox.addEventListener("keyup", handleEvent, false);
  textbox.addEventListener("blur", handleEvent, false);
}, false);

Answer 1

var num2img = {
  "3" : "visa",
  "9" : "mastercard"
};

$('#num').on('input', function(){
  var n = this.value.charAt(0);  
  if(n && n in num2img){
    $('#cardImage')[0].src = 'images/'+ num2img[n] +'.png';
  }else{
    $('#cardImage')[0].src = 'images/cardImage.png'; // default
  }
});

demo

Answer 2

尝试这样的事情，FIDDLE

JAVASCRIPT CODE

        $(document).ready(function(){
            $('#my_id').keyup(function(){
                if(this.value != '' ){
                    var val = this.value.substring(0,1);
                    if(val == '3'){
                        alert('visa card');
                    }else if(val == '9'){
                        alert('master card');
                    }else{
                        alert('other value');
                    }

                }
            })
        });

HTML CODE

    <input type="text" id="my_id" value="" />

一个html表单，自动检测输入并相应地更改图像

2 个答案: