JavaScript：掩码文本框的实现

来源：互联网发布：数码兽物语网络侦探编辑：程序博客网时间：2024/05/16 18:40

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

// text
var strText =objTextBox.value;
var nTextLen=strText.length;
// current corsor point
var nCursorPos=getPos(objTextBox);
// pressed key
var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
if (nKeyCode != 9)
window.event.returnValue = false;

switch (nKeyCode){
   case 8:{ // backspace
    strText = strText.substr(0,nCursorPos-1) + " " + strText.substr(nCursorPos, nTextLen-nCursorPos);
    nCursorPos = getCursorNum(nCursorPos,"L");
    break;
   }
   case 46:{ //del
    strText = strText.substr(0,nCursorPos) + " " + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
    nCursorPos = getCursorNum(nCursorPos,"R");
    break;
   }
   case 38:{ // up
    var dateNum = upKey(strText.substr(nCursorPos-1,1));
    strText = strText.substr(0,nCursorPos-1) + dateNum + strText.substr(nCursorPos,nTextLen);
    break;
   }
   case 39:{ // right
    //nCursorPos++;
    nCursorPos = getCursorNum(nCursorPos,"R");
    break;
   }
   case 37:{ // left
    nCursorPos = getCursorNum(nCursorPos,"L");
    break;
   }
   case 40:{ // down
    var dateNum = downKey(strText.substr(nCursorPos-1,1));
    strText = strText.substr(0,nCursorPos-1) + dateNum + strText.substr(nCursorPos,nTextLen);
    break;
　　 }
   default :{
    if(nCursorPos != 5){
     strText = strText.substr(0,nCursorPos-1) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
    }else{
     strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos+1,nTextLen);nCursorPos++;
    }

   //nCursorPos++;
   nCursorPos = getCursorNum(nCursorPos,"R");
   if (nCursorPos>strText.length){
    nCursorPos=strText.length;
   }
   break;
   }

}
if (strText.match(expMask)){
// right format
objTextBox.value = strText;
}
// move cursor
setCursor(objTextBox,nCursorPos);
}

// get current cursor position
function getPos(obj){
obj.focus();
var workRange=document.selection.createRange();
obj.select();
var allRange=document.selection.createRange();
workRange.setEndPoint("StartToStart",allRange);
var len=workRange.text.length;
workRange.collapse(false);
workRange.select();
return len;
}

// set current cursor position
function setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);

range.select();
}

function setBeginCursor(obj,cursorNum){
if(cursorNum >= 0 && cursorNum <= 3){
setCursor(obj,3);
}else if(cursorNum > 4 && cursorNum <= 8){
setCursor(obj,6);
}
}

function getCursorNum(cursorNum,keyName){
if(keyName=="R"){
cursorNum++;
}else{
cursorNum--;
}

if(cursorNum < 3){
cursorNum = 2;
}else if(cursorNum > 7){
cursorNum = 7;
}
return cursorNum;
}

function downKey(dateNum){
if(dateNum == " "){
   dateNum = 0;
}else if(nCursorPos == 6){
   dateNum=1;
}else if(nCursorPos == 7 && dateNum == 2){
   dateNum = 2;
}else{
    dateNum++;
}
}

function upKey(dateNum){
if(dateNum == " "){
dateNum = 0;
}else if(dateNum != 0){
dateNum--;
}
}

//-->
</script>
<style type="text/css">

</style>
<body>
<input type="text" name="maskDate" id="maskDate" value="20 年月" size="13" onclick="setBeginCursor(this,getPos(this));" onkeydown="mask(maskDate)">

</body>
</html>