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

IloveChinatoo 2009-12-26 09:10:14
请教大家,想用js实现这样一个功能:
页面上一个显示时间的文本框(要求 hh:mm:ss 格式的),只对数字键有效,当用户每输入两位数字时,自动补上时间分隔符“:”号,并对该数字是否大于59进行验证(alert就好,有点儿像手动设置IP的效果),期待高人解答,谢谢!
...全文
154 11 打赏 收藏 举报
写回复
11 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
benjaminwu198818 2009-12-27
  • 打赏
  • 举报
回复
我楼上写的也是思路…
friendly_ 2009-12-27
  • 打赏
  • 举报
回复

<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)&®Exp.$1>59)
{
alert("minute should be small then 59");
return;
}
if (reg3.test(this.value)&®Exp.$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>
IloveChinatoo 2009-12-27
  • 打赏
  • 举报
回复
[Quote=引用 9 楼 kaoh1631 的回复:]
上面的是我的思路,楼主可以增加一些校验JS ,完善上面的代码。
例如:
1) 不能让用户输入英文
2) 不能让用户复制、粘贴不合法的数据

当文件输入框,失去焦点时,必须进行校验。
使用时间正则表达式:
^([0-1][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$

,因为 javascript的onkeyup() 事件,当用户输入速度过快时不是很可靠,所以必须加一个可靠的onblur()事件时间格式的进行校验。


[/Quote]
解释得很详细,我正想问onblur()事件有什么用呢,非常感谢。一定给分。
Thinking_In_IT 2009-12-27
  • 打赏
  • 举报
回复
上面的是我的思路,楼主可以增加一些校验JS ,完善上面的代码。
例如:
1) 不能让用户输入英文
2) 不能让用户复制、粘贴不合法的数据

当文件输入框,失去焦点时,必须进行校验。
使用时间正则表达式:
^([0-1][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$

,因为 javascript的onkeyup() 事件,当用户输入速度过快时不是很可靠,所以必须加一个可靠的onblur()事件时间格式的进行校验。

Thinking_In_IT 2009-12-27
  • 打赏
  • 举报
回复
接分分~ 我的思路是这样:

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()"/>

IloveChinatoo 2009-12-27
  • 打赏
  • 举报
回复
多谢楼上,目前实现了补“:”的需求,但没有对输入进行验证,还是可以输入非数字和大于60的数字。期待更完善的解决。
benjaminwu198818 2009-12-26
  • 打赏
  • 举报
回复
<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>
IloveChinatoo 2009-12-26
  • 打赏
  • 举报
回复
楼上也没理解我的意思,我并不需要计时器啊,文本框里的值是用户随便输入的,我只不过想实现对用户的输入进行验证和自动补":"号。不过你说的利用onchange事件也提供了一种思路。我再想想,也还请大家继续帮帮忙啊!!
benjaminwu198818 2009-12-26
  • 打赏
  • 举报
回复
可以利用onfocus事件加上一个计时器函数就可以实现了,当文本框中获取了光标那么计时器开始启动,陆续进行判断,当光标离开后,又停止计时器。(因为html中的onchange事件是在值改变,失去光标后才执行的,并不是当值一改变就马上执行的)
IloveChinatoo 2009-12-26
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 tianweishuiguo 的回复:]
可以让光标停留在文本框中,等待输入,
可以用正则表达式判断输入的数字是否合法.
若不合法则alert,否则继续下一个输入
[/Quote]
1楼没有仔细看清楚我的需求,除了对数字进行验证,还要每输两位数字,自动补时间分隔符":"啊。不过还是先谢谢了。
东大坡居士 2009-12-26
  • 打赏
  • 举报
回复
可以让光标停留在文本框中,等待输入,
可以用正则表达式判断输入的数字是否合法.
若不合法则alert,否则继续下一个输入
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2009-12-26 09:10
社区公告
暂无公告