前言：
在系统中有输入耗时的需求，用于描写叙述一个活动花费多少时间。
详细要求：
精确到分钟，仅仅同意录入小时和分钟，不同意输入不合法的字符，或者做对应的校验。
设计：
依据需求考虑使用js的键盘时间来进行控制，精巧非数字以外的字符录入至输入框中，这样就须要校验了。
实现代码（支持ie及chrome）
页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.1.min.js"></script>
<!--inputTime.js 用到 jquery-position.js 组件-->
<script language="JavaScript" type="text/javascript" src="inputTime.js"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
bindInputTimeEvent('txt1')
bindInputTimeEvent('txt2')
bindInputTimeEventByClass('cls1')
})
</script>
<body>
測试耗时输入框(最大小时数:99 最大分钟数:59) <br><br>
耗时-绑定id：<input id='txt1' type="text" value="" maxlength=5 style="ime-mode:disabled"/>
耗时-绑定class：<input class='cls1' type="text" value="" maxlength=5 style="ime-mode:disabled"/>
耗时-99小时模式(input中新建timeTpye='99')：<input class='cls1' type="text" value="" maxlength=5 timeTpye='99'/>
</body>
</html>
inputTime.js
/**
* @author 全冠清(获得当前的输入框位置)
*/
$.fn.extend({
position:function( value ){
var elem = this[0];
if (elem&&(elem.tagName=="TEXTAREA"||elem.type.toLowerCase()=="text")) {
if($.browser.msie){
var rng;
if(elem.tagName == "TEXTAREA"){
rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x,event.y);
}else{
rng = document.selection.createRange();
}
if( value === undefined ){
rng.moveStart("character",-event.srcElement.value.length);
return rng.text.length;
}else if(typeof value === "number" ){
var index=this.position();
index>value?( rng.moveEnd("character",value-index)):(rng.moveStart("character",value-index))
rng.select();
}
}else{
if( value === undefined ){
return elem.selectionStart;
}else if(typeof value === "number" ){
elem.selectionEnd = value;
elem.selectionStart = value;
}
}
}else{
if( value === undefined )
return undefined;
}
}
})
/**
* @author yzp
*/
// 绑定输入框事件 通过id
function bindInputTimeEvent(textid){
$('#'+textid).click(inputTimeClick)
$('#'+textid).keydown(inputTimeKeydown)
$('#'+textid).keyup(inputTimeKeyup)
}
/**
* @author yzp
*/
// 绑定输入框事件 通过class
function bindInputTimeEventByClass(textid){
$('.'+textid).click(inputTimeClick)
$('.'+textid).keydown(inputTimeKeydown)
$('.'+textid).keyup(inputTimeKeyup)
}
// 点击输入框则回到第一个位置
function inputTimeClick(){
$(this).position(0);
// alert($(this).val());
}
/*
* 按键的首个触发事件，此时的value 还是输入之前的
* 在keydown方法中 假设返回false 输入字符则不在文本框中显示
*/
function inputTimeKeydown(e){
//alert(event.keyCode);
//alert($(this).val());
// 字符超过5个就不能输入
var inputValue = $(this).val();
if(inputValue.length>5){
return false;
}
// 进行字符处理，自己主动更新时间
if ((e.keyCode>=48 && event.keyCode<=57) || (e.keyCode>=96 && event.keyCode<=105)){ //数字键不禁用
var inputValue = $(this).val();
var pos = $(this).position()
var fontStr
var tailStr
// 假设是全时间模式（非24小时）
if($(this).attr('timeTpye')=='99'){
}else{ //24小时模式
// 限制最大小时为23小时
if(pos==0){
if( (e.keyCode>=51 && e.keyCode<=57) || (e.keyCode>=99 && event.keyCode<=105)){
return false;
}
// （修复第二遍输入时仅仅输入第一位导致的bug）
inputValue = "00:00";
// alert("xx");
}
if(pos==1){
fontStr = inputValue.substring(0,pos);
//alert(fontStr)
if(fontStr==2){ //当第一位是2的时候，第二位最多是3 ，为了满足最多23点
if( (e.keyCode>=52 && e.keyCode<=57) || (e.keyCode>=100 && event.keyCode<=105)){
return false;
}
}
}
}
if(pos==2){
fontStr = inputValue.substring(0,pos)+":";
pos ++;
tailStr = inputValue.substring(pos+1,6);
}else{
fontStr = inputValue.substring(0,pos);
tailStr = inputValue.substring(pos+1,6);
}
// 限制最大分钟为59分钟
if(pos==3){
if( (e.keyCode>=54 && e.keyCode<=57) || (e.keyCode>=102 && event.keyCode<=105)){
return false;
}
}
// alert($(this).val());
$(this).val(fontStr + tailStr);
// alert("pos:" + pos+ "fontStr:"+fontStr + " tailStr" +tailStr )
// 假设是首次键入有效的数字button，则默认填充兴许的时间。
if($(this).val().length==0){
$(this).val($(this).val()+"0:00");
}
$(this).position(pos);
if($(this).position()==5){
$(this).position(0);
}
} else if((e.keyCode>=37 && event.keyCode<40) || event.keyCode==9){ //方向键不禁用
}else{ //其他键禁用
return false;
}
}
/*
* 按键的第三个触发事件，此时的value是输入之后的
*
*/
function inputTimeKeyup(e){
if($(this).position()==5){
//$(this).position(0);
}
}备注：
此应用在某些输入法的中文状态无法输入（如谷歌输入法），须要切换至英文（可是ie浏览器通过样式禁用输入法的方式也没有问题）。