表单中时间字段中的自动冒号

Question

我有以下要求，如果没有手动输入这种格式 hh:mm:ss

，表单的时间字段应该自动添加冒号

我有下面的代码，它可以很好地自动填充，但是如果用户手动键入冒号，它会添加两个冒号，例如 hh::m:ss

有人可以帮忙解决这个问题吗？

JSP：

<b:form-group label="${runtime}" labelFor="runtime" cssLabel="col-sm-2" cssBody="col-sm-2" cssClass="required">
    <form:input path="runTime" cssClass="form-control" required="required" maxlength="8"/>
    <form:errors path="runTime" cssClass="validate-error"/>
</b:form-group>

JS：

$('#runTime').on('keydown', function(e) {
    if(e.keyCode != 8 && (this.value.length === 2 || this.value.length === 5)) {
        this.value += ":";
    }
});

更新答案

我们必须在以 chiliNUT 回答折叠之前添加额外的检查，否则全选并点击删除/退格按钮在 Chrome 浏览器中不起作用。

$('#runTime').on('keydown', function(e) {
    //your code
    if(e.keyCode != 8 && (this.value.length === 2 || this.value.length === 5)) {
        this.value += ":";
    }
    //collapse double colons
    if(this.value.endsWith("::")) {
        this.value=this.value.replace(/:+/g,":");
    }
});

Answer 1

keydown 后折叠双冒号

$('#runTime').on('keydown', function(e) {
    //your code
    if(e.keyCode != 8 && (this.value.length === 2 || this.value.length === 5)) {
        this.value += ":";
    }
    //collapse double colons
    this.value=this.value.replace(/:+/g,":");
});

最后一行将查看字符串，然后采用 1 个或多个冒号（连续冒号？:-)）的任何实例并将其转换为单个冒号