求助：javascript实现自动完成时间格式的代码

Question

请教大家，想用js实现这样一个功能：
页面上一个显示时间的文本框（要求 hh:mm:ss 格式的），只对数字键有效，当用户每输入两位数字时，自动补上时间分隔符“:”号，并对该数字是否大于59进行验证（alert就好，有点儿像手动设置IP的效果），期待高人解答，谢谢！

Answer 1

可以让光标停留在文本框中,等待输入,
可以用正则表达式判断输入的数字是否合法.
若不合法则alert,否则继续下一个输入

Answer 2

可以利用onfocus事件加上一个计时器函数就可以实现了，当文本框中获取了光标那么计时器开始启动，陆续进行判断，当光标离开后，又停止计时器。（因为html中的onchange事件是在值改变，失去光标后才执行的，并不是当值一改变就马上执行的）

Answer 3

楼上也没理解我的意思，我并不需要计时器啊，文本框里的值是用户随便输入的，我只不过想实现对用户的输入进行验证和自动补":"号。不过你说的利用onchange事件也提供了一种思路。我再想想，也还请大家继续帮帮忙啊！！

Answer 4

<script type="text/javascript">
$=function (id){
return document.getElementById(id);
}
var timer=0;//存储计时器ID
<!--当获取焦点时执行-->
objOnFocus=function(){
timer=setInterval(function(){

if($('txtTimeFormat').value.length===2||$('txtTimeFormat').value.length===5){
$('txtTimeFormat').value+=":";
}
},50);
}
<!--当失去焦点时执行-->
objLostFocus=function(){
clearInterval(timer);
}</script>
<input type="text" id="txtTimeFormat" onfocus="objOnFocus()"/>
</body>

Answer 5

接分分~ 我的思路是这样：1）按键的时候自动补冒号
2）控件失去焦点的时候，进行格式校验
<SCRIPT language=javascript>
<!--
//添加冒号
function add(){
var timeObj=document.getElementById("time").value;if(timeObj.length==2||timeObj.length==5){
document.getElementById("time").value=timeObj+":";
}}//校验格式
function checkFormat(){
var patm=/^([0-1][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/;
if(!patm.exec(document.getElementById("time").value)){
document.getElementById("time").focus();
document.getElementById("time").select()
alert("格式不正确 hh:mm:ss");
}
}
//-->
</SCRIPT><input type="text" id="time"  onkeyup="add();"  maxlength="8" onblur="checkFormat()"/>

Answer 6

上面的是我的思路，楼主可以增加一些校验JS ，完善上面的代码。
例如：
1） 不能让用户输入英文
2） 不能让用户复制、粘贴不合法的数据当文件输入框，失去焦点时，必须进行校验。
使用时间正则表达式：
^([0-1][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$，因为 javascript的onkeyup() 事件，当用户输入速度过快时不是很可靠，所以必须加一个可靠的onblur（）事件时间格式的进行校验。

Answer 7

解释得很详细，我正想问onblur（）事件有什么用呢，非常感谢。一定给分。

Answer 8

  <INPUT TYPE="text" id="test"><SCRIPT LANGUAGE="JavaScript">
<!--
window.onload = function(){
document.getElementById("test").onkeyup = function(){
var reg1=/^\d{2}$/;
var reg2=/^\d{2}:(\d{2})$/;
var reg3=/^\d{2}:\d{2}:(\d{2})$/;
if (this.value.length>8)
{
this.value = this.value.substr(0,8);
return false;
}
if (reg1.test(this.value)&&this.value>23)
{
alert("hour should be small then 23");
return ;
}
if (reg2.test(this.value)&&RegExp.$1>59)
{
alert("minute should be small then 59");
return;
}
if (reg3.test(this.value)&&RegExp.$1>59)
{
alert("second should be small then 59");
return;
}
if (/^\d{2}$/.test(this.value)||/^\d{2}:\d{2}$/.test(this.value))
{
this.value = this.value+":";
}
}
}
//-->
</SCRIPT>