格式化输入字段，将前4位数字用句点分隔，将后2位数字用句号分隔

Format input field to separate the first 4 digits with a period, and the next 2 digits with a period

本文关键字：分隔 数字 将后 2位 输入 句点 4位 格式化 字段 将前      更新时间：2023-09-26

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

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

这是我的输入：

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

您可以使用以下插件：

屏蔽输入插件

我的建议涉及两个字段。一个比一个。这是一个演示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或类似的方法来解决。

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

例如：

<input type="text" maxlength="4">.<input type="text" maxlength="2">.<input type="text" maxlength="4">
相关文章：