使用HTC实现可用鼠标和键盘方向键调整的web时间控件

做软件产品有时会遇到一个困惑，那就是如何样式化（格式化）用户的不规则输入。以日期/时间的输入为例，前些年比较通用的做法是写一段js代码来判断用户的输入是否正确，如果不正确就提示要以某某格式录入，这种方式不仅费时费力，而且颇有马后炮之嫌。如何能够引导客户按照正确的格式填写我们所需的内容？我的看法是，可以剥夺用户手动输入的权利，只允许其在运行的范围内选择和调整。

我的初步设想是，对于一个用来进行时间输入的文本框，当鼠标移入时，如果文本框为空，则自动显示0:00这一基准时间以供调整。当鼠标指向小时部分，向上转动鼠标滚轮或按键盘的向上方向键，则小时数值增加，向下转动鼠标滚轮或按键盘的向下方向键，则小时数值增加。同样，也可以使用鼠标滚轮或者键盘方向键调整分钟数值。此外，使用键盘的左右方向键可以在小时和分钟两部分之间切换。

为此，写了一堆js代码来实现设想的功能，最终效果如下。

 

但是，麻烦很快就再次拜访了。为了使用这个功能，必须每次都为该文本框添加onmouseover等很多事件，太烦。怎么才能让这个功能可方便的复用？HTC应该会是个好的主意。

有关HTML Component（HTC）的介绍可参见http://www.blueidea.com/tech/web/2003/1227.asp，蓝色理想的这篇文章是我HTC入门的好导师，再此多谢了~~

使用了HTC后，页面代码得到了极大的简化，只需引用样式表dateinput.css并为需要使用时间控件的文本框指定class为dateinput即可。以下是dateinput.htm的内容。

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE >  New Document  </ TITLE >
< link  href ="dateinput.css"  rel ="stylesheet"  type ="text/css" >
</ HEAD >
< BODY >
< INPUT  TYPE ="text"  NAME ="minute"  value =""  class ="dateinput"  readonly >
可以使用方向键或鼠标滚轮调整时间，呵呵
</ BODY >
</ HTML >

以下是dateinput.css的内容。 

.dateinput {
  behavior : url(dateinput.htc)
}

 

 以下是dateinput.htc的内容。

 

< PUBLIC:ATTACH  EVENT ="onmousemove"  oNEVENT ="selTime()" />
< PUBLIC:ATTACH  EVENT ="onmousewheel"  oNEVENT ="setTime()" />
< PUBLIC:ATTACH  EVENT ="onkeydown"  oNEVENT ="setTimeByKB()" />
< PUBLIC:ATTACH  EVENT ="onmouseout"  oNEVENT ="unselTime()" />
< PUBLIC:METHOD  NAME ="regainTimeObj" />  
< PUBLIC:METHOD  NAME ="setObjValue" />  
< script  language ="javascript" > ...
 var h, m;
 var sel;
 var iValue;

 function selTime()...{
  if(element.value == "")
   element.value = "0:00";
  var bdy = document.body;
  regainTimeObj();
  
  var baseLeft = bdy.leftMargin * 1  + element.offsetParent.offsetLeft * 1;
  var hLeft = baseLeft + h.offsetLeft * 1;
  var hRight = hLeft + h.boundingWidth;
  var mLeft = baseLeft + m.offsetLeft * 1;
  var mRight = mLeft + m.boundingWidth;
  var mouseX = window.event.clientX;
  if (mouseX >= hLeft && mouseX <= hRight)...{
   h.select();
   sel = 1;
  }
  if (mouseX >= mLeft && mouseX <= mRight)...{
   m.select();
   sel = 2;
  }
 }

 function unselTime()...{
  h = null;
  m = null;
  sel = -1;
 }
 function setTime()...{
  var step = parseInt(event.wheelDelta / 120, 10);
  switch(sel)...{
   case 1:
    setObjValue(h, step);
    break;
   case 2:
    setObjValue(m, step);
    break;
  }
  //return false;
 }
 
 
 function setTimeByKB()...{
  var kc = event.keyCode;
  switch(kc)...{
   case 37: //left
    switch(sel)...{
     case 2:
      h.select();
      sel--;
      break;
     default:
      break;
    }
    break;
   case 38: //up
    switch(sel)...{
     case 1:
      setObjValue(h, 1);
      break;
     case 2:
      setObjValue(m, 1);
      break;
     default:
      break;
    }
    break;
   case 39: //right
    switch(sel)...{
     case 1:
      m.select();
      sel++;
      break;
     default:
      break;
    }
    break;
   case 40: //down
    switch(sel)...{
     case 1:
      setObjValue(h, -1);
      break;
     case 2:
      setObjValue(m, -1);
      break;
     default:
      break;
    }
    break;
   default:
    alert("请使用方向键或鼠标滚轮调整数字大小。");
    break;
  }
  return false;
 }
 
 function regainTimeObj()...{
  var wholeText = element.value;
  if(!wholeText || wholeText == "")
   wholeText = "0:00";
  var pos = wholeText.indexOf(":");
  var length = wholeText.length;
  h = element.createTextRange();
  m = element.createTextRange();
  h.moveEnd("character", pos - length);
  m.moveStart("character", pos + 1);
  switch(sel)...{
   case 1:
    h.select();   
    break;
   case 2:   
    m.select();
    break;
  }
 }
 
 
 function setObjValue(obj, step)...{
  iValue = parseInt(obj.text, 10) + step;
  var maxValue = 59;
  var addZero = false;
  switch(obj)...{
   case h:
    maxValue = 23;
    addZero = false;   
    break;
   case m:
    maxValue = 59;
    addZero = true;
    break;
   default:
  }
  if(iValue > maxValue)
   iValue = 0;
  if(iValue < 0)
   iValue = maxValue;
  if(addZero)...{
   if(iValue.toString().length == 1)
    iValue = "0" + iValue;
  }
  obj.text = iValue.toString();
  regainTimeObj();
 }
</ script >