Question

我有一个输入文本框，用00:00到23:59填写小时我想在2个第一个字符之后动态插入双点“：”，类似于http://www.railtime.be/website/home-fr，甚至在给出错误时间时给出错误信息，如30:66 ......我不能弄清楚它是如何完成的，任何想法？

<input type="text" name="time" id="time" placeholder="00:00" maxlength="5" value="">

我认为按键功能已被使用，但是用什么？提前谢谢！

已解决dfsq解决方案：

$('input#time').on('keyup', function(e) {
    if (e.which && this.value.length === 2 && e.which !== 8) {
        this.value += ':';
    }
});

Answer 1

这可能会帮到你。 http://jsfiddle.net/e2DzT/380/

检查格式是否正确，是否为空。它将输出正确的响应。格式只能是15:30格式。

找到正确的格式后，表格即被提交。

<form id="login" name="login" method="post" action="#">

只需将其更改为您希望它执行的操作。

Answer 2

Firefox等不支持

<input type="time"> 如果你想避免使用jQuery，只需使用这个简单的代码，其中你的'：'将在使用keyup事件键入自己时插入 -

<html>
<head>
<script type="text/javascript">
function insertColon(e){
    var unicode=e.keyCode? e.keyCode : e.charCode
    if(unicode!=8){// this avoids backspace to spoil your logic
        var textval=document.getElementById("time").value;  
        if(textval.length==3&&textval.charAt(1)!=":"&&textval.charAt(2)!=":"){// this case arises when backspace is used
            textval=textval.substring(0,2)+":"+textval.substring(2,3);
            document.getElementById("time").value=textval;
        }
        else if(textval.length==2&&textval.charAt(1)!=":"){// normal case
            textval=textval+":";
            document.getElementById("time").value=textval;
        }
    }
    else if(unicode==46&&textval.length>=3&&textval.charAt(1)!=":"&&textval.charAt(2)!=":"){
    textval=textval.substring(0,2)+":"+textval.substring(2);`document.getElementById("time").value=textval;`
}

}  
</script>
</head>
<body>    
<input type="text" name="time" id="time" placeholder="00:00" maxlength="5" value="" onKeyup="insertColon(event);">    
</body>
</html>

您可以自己在脚本中添加一些小代码，以检查小时和分钟的范围是否在范围内。

Answer 3

您可以尝试以下Javascript代码：

function appendColon(){
    var time=document.getElementById("time").value;
    var hours=time.substring(0, 2);
    var minutes=time.substring(2, 4);
    document.getElementById("time").value=hours+":"+minutes;  
}

<input type="text" name="time" id="time" onchange="appendColon()" placeholder="00:00" maxlength="5" value="">

在输入的onchange事件中，在小时和分钟之间追加:。

如何用JS在中间输入文本中动态插入字符

3 个答案: