javascript / jquery根据输入到文本输入字段的值更改html元素

时间:2013-11-08 21:35:22

标签: javascript jquery html

这听起来很简单,但我是Javascript的新手,我很难找到/创建这个脚本。我有一张信用卡的BIN号码列表,我试图抓住卡号字段的前6位数字并检查它是什么类型的卡片,然后根据输入的BIN在屏幕上显示相应的卡片徽标。 / p>

我已经能够创建一个非常简单的脚本来检查输入并可以更改值或元素,但我还没有想出如何反向。如果用户删除了卡并重新输入卡信息,我需要能够删除卡徽标并更换它。

这是一个非常简单的演示。 http://jsfiddle.net/6HmxM/653/

$( "input" )

  .keyup(function() {
  if ($( "input" ).val() == 45) {
      var val = "Visa";
  } 
  $( "p" ).text( val )
})

1 个答案:

答案 0 :(得分:1)

在这种情况下,最好使用switch来打印默认值,这可能是空白的。只需设置每个案例即可打印出您想要的内容,否则它将默认为default:中定义的内容。

$( "input" )

  .keyup(function() {

      var $value = $(this).val(),
          output = "";

      switch( $value ) {

          case "45" :
              output = "Visa";
          break;

          case "44" :
              output = "Mastercard";
          break;

          default:
              output = "Nothing";
              break;


      }

      $( "p" ).text( output )
  })

实施例: http://jsfiddle.net/6HmxM/655/

虽然你可能需要根据前6个字符对switch进行调整,可能是RegEx与前六个字符匹配,因为除output之外什么都没有。每个击键都有一个完全匹配。在这种情况下,你可能需要这样的东西:

$( "input" )

  .keyup(function() {

      var $value = $(this).val(),
          output = "";

      switch( true ) {

          case /4567/.test($value) :
              output = "Visa";
          break;

          case /4412/.test($value) :
              output = "Mastercard";
          break;

          default:
              output = "Nothing";
          break;

       }

      $( "p" ).text( output )
  })

实施例: http://jsfiddle.net/6HmxM/656/