Question

我有一个文本框和onkeyup事件，当用户一个接一个地输入值时，我必须屏蔽（用星号（*）字符）字符串的一部分（这是一个信用卡号）。例如假设用户输入的值为 1234 5678 1234 2367 但文本框会将数字显示为 1234 56** **** 2367

如果用户输入XXXX XXXX XXXX XXXX，我会一般输出将为XXXX XX** **** XXXX，其中X表示任何有效数字

该程序需要使用 JQuery 完成。我已经制作了该程序（并且它也正在工作），该程序在

之下

<html>

<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script>
    $(document).ready(function() {

        $("#txtCCN").keyup(function(e) {

            var CCNValue = $(this).val();
            var CCNLength = CCNValue.length;

            $.each(CCNValue, function(i) {

                if (CCNLength <= 7) {
                    $("#txtCCN").val(CCNValue);
                } //end if

                if (CCNLength >= 8 && CCNLength <= 14) {
                    $("#txtCCN").val(CCNValue.substring(0, 7) + CCNValue.substring(7, CCNLength).replace(/[0-9]/g, "*"));
                } //end if 

                if (CCNLength >= 15) {
                    $("#txtCCN").val(CCNValue.substring(0, 7) + CCNValue.substring(7, 15).replace(/[0-9]/g, "*") + CCNValue.substring(15));
                } //end if
            });
        });
    });
    </script>
</head>

<body>
    <input type="text" id="txtCCN" maxlength=19 />
</body>
</html>

但我认为该程序可以更优雅的方式进行优化/重写。

你们中的任何人都可以帮助我吗？

N.B.~我目前不需要任何验证。

提前致谢。

Answer 1

length，substring和replace的任何条件都不需要安全地直接用于任何长度的字符串。

$(document).ready(function() {

  $("#txtCCN").keyup(function(e) {
    var CCNValue = $.trim($(this).val());

    $(this).val(CCNValue.substring(0, 7) + CCNValue.substring(7, 15).replace(/\d/g, "*") + CCNValue.substring(15));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="text" id="txtCCN" maxlength=19 />

val也可以使用

$(document).ready(function() {

  $("#txtCCN").keyup(function(e) {
    $(this).val(function(i, v) {
      return v.substring(0, 7) + v.substring(7, 15).replace(/\d/g, "*") + v.substring(15);
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="text" id="txtCCN" maxlength=19 />

在VanillaJS中可以做同样的事情

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('txtCCN').addEventListener('keyup', function() {
    var value = this.value.trim();

    this.value = value.substring(0, 7) + value.substring(7, 15).replace(/\d/g, '*') + value.substring(15);
  }, false);
});

<input type="text" id="txtCCN" required maxlength="19" />

Answer 2

试一试：100％可行......

$(document).ready(function () {

    $("#txtCCN").keyup(function (e) {
        var CCNValue = $(this).val();
        CCNValue = CCNValue.replace(/ /g, '');

        var CCNLength = CCNValue.length;
        var m = 1;
        var arr = CCNValue.split('');
        var ccnnewval = "";

        if (arr.length > 0) {
            for (var m = 0; m < arr.length; m++) {
                if (m == 4 || m == 8 || m == 12) {
                    ccnnewval = ccnnewval + ' ';
                }

                if (m >= 6 && m <= 11) {
                    ccnnewval = ccnnewval + arr[m].replace(/[0-9]/g, "*");
                } else {
                    ccnnewval = ccnnewval + arr[m];
                }
            }
        }

        $("#txtCCN").val(ccnnewval);
    });
});

Answer 3

您可能会考虑删除前两个if语句。你的函数所做的所有工作都包含在最后一个中，所以你可以从

中更改它

if(CCNLength >= 15)

到

if(CCNLength >= 8)

这似乎保留了功能，同时减少了代码中的一些重复。

Answer 4

添加一个通用例程，用于自定义输入数据中的空间点和掩码范围。这也将尊重您最初要求的空格字符。

$(function () {
    $("#cardnum").keyup(function (e) {
        var cardNo = $(this).val();
        //Add the indices where you need a space
        addSpace.call(this, [4, 9, 14], cardNo ); 
        //Enter any valid range to add mask character.
        addMask.call(this, [7, 15], $(this).val()); //Pick the changed value to add mask 
    });

    function addSpace(spacePoints, value) {
        for (var i = 0; i < spacePoints.length; i++) {
            var point = spacePoints[i];
            if (value.length > point && value.charAt(point) !== ' ') 
                $(this).val((value.substr(0, point) + " " 
                                   + value.substr(point, value.length)));
        }
    }

    function addMask(range, value) {
        $(this).val(value.substring(0, range[0]) 
            + value.substring(range[0], range[1]).replace(/[0-9]/g, "*") 
            + value.substring(range[1]));
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="cardnum" maxlength="19" />

使用JQuery屏蔽文本框中的值

4 个答案: