Question

我在jsfiddle中尝试了我的代码并且它有效。

基本上我要做的是获取信用卡号并屏蔽它，除了最后4位数（16长），如果信用卡号以3开头，它将有15个长度。

我想我错过了一些东西。

这是我的代码

var ccNumInputElement = $("#ccNumInputField")[0];
var ccNumHiddenFieldID = "creditCardForm.creditCard.cardNumber";
var ccNumHiddemElement = document.getElementById(ccNumHiddenFieldID) == null ? "" :
  document.getElementById(ccNumHiddenFieldID);
var ccardnumber = "";
var ccardnumberArray = ["", "", "", "", "", "", "", "", "", "", "", "", "",
  "", "", ""
];
var ccardnumberLength = 0;

$(ccNumInputElement).on(addEventListener('keyup', processCCNum));

function processCCNum() {
  var inputControl = ccNumInputElement;
  var outputControl = ccNumHiddemElement;
  var ccardnumberMasked = "";

  ccardnumberLength = ccNumInputElement.value.length;

  var ccardnmmberLast = ccardnumberLength == 0 ? "" : inputControl.value
    .substring(ccardnumberLength - 1);

  var ccardnmmberFirst = ccardnumberLength == 0 ? "" : outputControl.value
    .substring(0, 1);

  if (ccardnumberLength == 0) {
    ccardnumberMasked = "";
    for (i = 0; i < 16; i++)
      ccardnumberArray[i] = "";
  }

  if (ccardnumberLength != 0) {
    if (ccardnmmberFirst == "3") {
      if (ccardnumberLength <= 11) {
        ccardnumberMasked = "***********".substring(0,
          ccardnumberLength);
        ccardnumberArray[ccardnumberLength - 1] = ccardnmmberLast;
      } else {
        ccardnumberMasked = "***********" +
          inputControl.value.substring(11);
        ccardnumberArray[ccardnumberLength - 1] = ccardnmmberLast;
      }

    } else {

      if (ccardnumberLength <= 12) {
        ccardnumberMasked = "************".substring(0,
          ccardnumberLength);
        ccardnumberArray[ccardnumberLength - 1] = ccardnmmberLast;
      } else {
        ccardnumberMasked = "************" +
          inputControl.value.substring(12);
        ccardnumberArray[ccardnumberLength - 1] = ccardnmmberLast;
      }
    }
    ccardnumber = "";
    if (ccardnmmberFirst == "3") {
      for (i = 0; i < 15; i++) {
        ccardnumber = ccardnumber + ccardnumberArray[i];
      }
    } else {
      for (i = 0; i < 16; i++) {
        ccardnumber = ccardnumber + ccardnumberArray[i];
      }
    }
    inputControl.value = ccardnumberMasked;

    outputControl.value = ccardnumber;
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="ccNumInputField" size="51" class="billinginfo" maxlength="16" placeholder="XXXXXXXXXXXX1234" />
<input type="hidden" name="creditCardForm.creditCard.cardNumber" id="creditCardForm.creditCard.cardNumber" />

JSFiddle

如果您更好地了解如何实现我在JS中尝试的内容，我将不胜感激。

Answer 1

如果我理解你的问题，你的功能很好，除非你输入第一个数字3的数字。

您只需更改maxlength即可。我添加了这一行

inputControl.setAttribute("maxlength", "15");

在一个conqtition中检查第一个数字是否等于3.如果它不是只将该属性设置为16。

以下是一个工作示例

var ccNumInputElement = $("#ccNumInputField")[0];
var ccNumHiddenFieldID = "creditCardForm.creditCard.cardNumber";
var ccNumHiddemElement = document.getElementById(ccNumHiddenFieldID) == null ? "" : document.getElementById(ccNumHiddenFieldID);
var ccardnumber = "";
var ccardnumberArray = ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""];
var ccardnumberLength = 0;

$(ccNumInputElement).on(addEventListener('keyup', processCCNum));

function processCCNum() {
  var inputControl = ccNumInputElement;
  var outputControl = ccNumHiddemElement;
  var ccardnumberMasked = "";

  ccardnumberLength = ccNumInputElement.value.length;

  var ccardnmmberLast = ccardnumberLength == 0 ? "" : inputControl.value
    .substring(ccardnumberLength - 1);

  var ccardnmmberFirst = ccardnumberLength == 0 ? "" : outputControl.value
    .substring(0, 1);

  if (ccardnumberLength == 0) {
    ccardnumberMasked = "";
    for (i = 0; i < 16; i++)
      ccardnumberArray[i] = "";
  }

  if (ccardnumberLength != 0) {
    if (ccardnmmberFirst == "3") {
      if (ccardnumberLength <= 11) {
        ccardnumberMasked = "***********".substring(0,
          ccardnumberLength);
        ccardnumberArray[ccardnumberLength - 1] = ccardnmmberLast;
      } else {
        ccardnumberMasked = "***********" +
          inputControl.value.substring(11);
        ccardnumberArray[ccardnumberLength - 1] = ccardnmmberLast;
      }

    } else {

      if (ccardnumberLength <= 12) {
        ccardnumberMasked = "************".substring(0,
          ccardnumberLength);
        ccardnumberArray[ccardnumberLength - 1] = ccardnmmberLast;
      } else {
        ccardnumberMasked = "************" +
          inputControl.value.substring(12);
        ccardnumberArray[ccardnumberLength - 1] = ccardnmmberLast;
      }
    }
    ccardnumber = "";
    if (ccardnmmberFirst == "3") {
      inputControl.setAttribute("maxlength", "15");
      for (i = 0; i < 15; i++) {
        ccardnumber = ccardnumber + ccardnumberArray[i];
      }
    } else {
      inputControl.setAttribute("maxlength", "16");
      for (i = 0; i < 16; i++) {
        ccardnumber = ccardnumber + ccardnumberArray[i];
      }
    }
    inputControl.value = ccardnumberMasked;

    outputControl.value = ccardnumber;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="ccNumInputField" size="51" class="billinginfo" maxlength="16" placeholder="XXXXXXXXXXXX1234" />
<input type="hidden" name="creditCardForm.creditCard.cardNumber" id="creditCardForm.creditCard.cardNumber" />

Answer 2

好的，所以问题出在初始变量中。改为

function processCCNum() {
    var inputControl = document.getElementById("ccNumInputField");
    var outputControl = document.getElementById("creditCardForm.creditCard.cardNumber");

我删除了

ccNumInputElement.on(addEventListener('keyup', processCCNum));

并添加到输入onkeyup =“processCCNum（）”

<input type="text" id="ccNumInputField" size="51" class="billinginfo" maxlength="20" onkeyup="processCCNum()" placeholder="XXXXXXXXXXXX1234" />

这适用于IE11但由于某种原因没有在jsfiddle上工作。

使用addEventListener（'keyup'）的JavaScript不能在Web上工作但是在jsfiddle上工作，请协助

2 个答案: