Question

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

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

以下是我的意见：

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

Answer 1

您可以使用插件：

Masked Input plugin

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，则键击事件被触发一次，但添加的字符是几个。无论如何，这可能与setInterval或类似的东西有关。

Answer 3

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

例如：

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

格式化输入字段以将前4个数字与句点分开，将接下来的2个数字与句点分开

3 个答案: