javascript - 格式化输入字段以用句点分隔前 4 位数字，用句点分隔接下来的 2 位数字

Question

我有一个带有占位符值的文本输入。我想知道当用户点击输入时是否有可能有一个默认值。该值应如下所示：____.__._____

值中的_字符应替换为用户键入的内容，但句点应保持不变。

这是我的输入：

<input type="text" id="accountnumber" name="accountnumber" placeholder="Located on your card" />

Answer 1

您可以为此使用插件：

屏蔽输入插件

Answer 2

我的建议涉及两个领域。一个比一个。这是一个演示http://jsfiddle.net/UCPxU/

HTML

<input type="text" class="template" value="____.__._____" />
<input type="text" id="accountnumber" name="accountnumber" placeholder="Located on your card" />

CSS

input {
    position: absolute;
    top: 0;
    left: 0;
}
input[name="accountnumber"] {
    background: none;
}

JS

var input = $("input[name='accountnumber']");
input.on("keyup", function(e) {
    var value = input.val();
    // catching backspace
    if(e.keyCode === 8) {
        if(value.length == 4) {
            input.val(value.substr(0, 3));
        } else if(value.length == 7) {
            input.val(value.substr(0, 6));
        }
    } else {
        if(value.length == 4) {
            input.val(value + ".");
        } else if(value.length == 7) {
            input.val(value + ".");
        }
    }
});

但是，该解决方案仅在用户单独键入每个字母时才有效。例如，如果他按住 3，keyup 事件会触发一次，但添加的字符是多个。无论如何，这可以用 setInterval 或类似的东西来解决。

Answer 3

您可以使用所需长度的输入框

前任：

<input type="text" maxlength="4">.<input type="text" maxlength="2">.<input type="text" maxlength="4">