Question

我们有以下格式的密码：

45 674 25 910

我们最初的要求是让用户能够输入带或不带空格的引脚

换句话说，如果引脚是10位数而没有空格，我们希望将其作为有效输入接受。

同样，如果引脚是13位数（带有三个空格），我们也希望将输入视为有效。

如果有或没有空格的数字小于10，或者有空格的数字超过13，我们想抛出输入无效的错误。

以下脚本满足上述要求：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnSearch").click(function () {
            var result = true;
            if ($('#pin').val().replace(/ /g, '').length == 10) {
                result = true;
            }
            else {
                result = false;
                alert("Invalid");
                return false;
            }
            return result;
        });
    });
</script>

但是，管理层决定更改要求在用户输入密码时自动添加空格。

换句话说，用户可以输入带有空格的密码，也可以输入不带空格的密码，但在输入密码时会自动添加这些空格。

如何修改上面的脚本？

更好的是，有一个例子我可以修改以满足我们的要求吗？

Answer 1

使用http://www.php.net/manual/en/language.constants.predefined.php

注意：此代码将在2,3,2,3 ..etc字符后添加空格。您可以通过编辑地图中的代码

来更改字符数

$("#user-input").on('keyup', function () {
     // Helpers
     var swap = 4, // Swap between 3 and 4
         index = 2; // Spaces indexs 2, 6, 9, 13 .. etc
    // This variable contains the same input value with sapces
    var niceVal = $(this).val()
        .replace("/\s/g", "").split("") // Remove all spaces and convert to array
        .map(function (item, i) { // loop throw the array
            if (i === 0) {
            return item;
        }
        if (i % index === 0) {
            item = item === " "
                ? item
                : " " + item;
            index += swap;
            swap = swap === 3
                ? 4
                : 3;
        }
            return item;
        }).join(""); // Convert array to string
    $(this).val(niceVal); // Update input value
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="user-input">

Answer 2

对于纯JS，我对问题的处理方法如下：

虽然我在评论中提到keyup事件，但似乎keydown事件更合适，因为keyup可能会导致奇怪的行为，因为同时由于速度打字。我没有经过彻底的测试，所以它只是一个指导。但是，如果你发现任何虫子，我可以看看它。

编辑尽管我付出了很多努力，但我已经意识到如果你想修改输入元素的值，就像在这个问题中一样，你必须设置一个逻辑和谐地利用keydown和keyup事件。这将极大地简化您的逻辑并产生更加坚固的代码。

好的，让我们去......

＆＃13;

var pin = document.getElementById("PIN"),
    pbt = document.getElementById("PBT");

pin.addEventListener("keydown", function(e){
                                  var val = e.target.value,
                                      len = val.length,
                                      lst = val[len-1],
                                      key = e.key;
                                  e.target.value = key === "Backspace" ? len === 4 ||
                                                                         len === 8 ||
                                                                         len === 11 ? val.slice(0,-1)
                                                                                    : val
                                                                       : len === 2 ||
                                                                         len === 6 ||
                                                                         len === 9  ? val + "\xa0"
                                                                                    : val;
                                });

pin.addEventListener("keyup", function(e){
                                var val = e.target.value,
                                    pix = val.search(/[^0-9\xa0]/); // problem index
                                e.target.value = ~pix ? val.slice(0, pix) : val 
                              });

pbt.addEventListener("click", function(e){
                                pin.value.length === 13 ? console.log(pin.value)
                                                        : console.log("Please complete the PIN Code");
                              });

＆＃13;

<input id="PIN" value="" placeholder="Enter PIN" maxlength=13 size=13/>
<button id="PBT">Enter PIN</button>

＆＃13;

如何在数字输入文本框时自动添加数字之间的空格？

2 个答案: