javascript - 自动检测输入并相应更改图像的 html 表单

Question

我需要一个 html 表单，如果我们在一个字段中输入以“3”开头的数字，则应显示图像“visa”，如果它以 9 开​​头，它将显示万事达卡。可以使用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