我要設定輸入格式 前四位必須為大寫字母 第五和第八位是 - 其余是四位數字 應該在editmask里怎么設置
1 回答
慕桂英4014372
TA貢獻1871條經驗 獲得超13個贊
類似于PB的editmask的可自行設置mask的輸入控件input.htm<html>
<head>
<title>格式化輸入控件 code by meixx</title>
<style type="text/css">
.txtMask{ background-color:#FFFFCC; behavior: url(meixx.htc);}
</style>
<script language="JavaScript">
<!--
//-->
</script>
</head>
<body >
<table cellpadding=0 cellspacing=0 border=1 width="100%">
<tr height="200">
<td>
<H4>格式化輸入控件</h4>
<p>模式:##-###-########
<p>說明:可自行更改輸入的格式,但只能用#作為輸入部分(暫時只能輸入數字),分隔部分字符不限!
<p> 合法檢查函數根據需要自己完成
<p>引用方法: <input type="text" check="date" mask="####-##-## ##:##" class="txtMask"....>
<p>css樣式: .txtMask{ background-color:#FFFFCC; behavior: url(meixx.htc);}
<p>code by meixx
<p>2005-04-06
<br><br>
</td>
</tr>
<tr>
<td>
日期時間輸入:<input type="text" name="txtMask" check="date" id="txtMask" mask="####-##-## ##:##" size=20 class="txtMask">
例如可輸入:2005-04-06 15:00
</td>
</tr>
</table>
</body>
</html>
********************************************************
//meixx.htc<!----><!--
接口定義
-->
<public:component>
<public:property name="description" value="Mask Input Behavior" />
<public:property name="version" value="1.0.0.0" /> <public:attach event="oncontentready" onevent="init()" />
<public:attach event="onselectstart" onevent="eventCancel()" />
<public:attach event="onkeypress" onevent="keyPress()" />
<public:attach event="onkeydown" onevent="keyDown()" />
<public:attach event="onPaste" onevent="eventCancel()" />
<public:attach event="onFocus" onevent="doFocus()" />
<public:attach event="onclick" onevent="doFocus()" />
<public:attach event="ondblclick" onevent="doFocus()" />
<public:attach event="onblur" onevent="doCheck()" /> <public:method name="getCursorPos" />
<public:method name="setCursorPos" />
<public:method name="movCursorNext" />
<public:method name="IsNumber" />
</public:component><!--
組件實現
-->
<script language="javascript">
var mask=element.mask;
//內部函數，事件oncontentready，初始化
function init()
{
//alert();
element.value=mask;
element.maxLength=mask.length;
}
function keyPress()
{
//如果輸入不是數字,返回
var keyNum=String.fromCharCode(event.keyCode)
if(!IsNumber(keyNum)) return false;
writeNum(keyNum,1);
var curPos=getCursorPos();
if(mask.charAt(curPos)!="#"){
MoveCursor(1);
}
}
function keyDown()
{
var e=window.event;
var code=e.keyCode;
// alert(code);
if(code==8 || code==37 || code==39){
var curPos=getCursorPos();
if(code==8){ //退格時替換內容
if(mask.charAt(curPos-1)!="#")
MoveCursor(-1);
curPos=getCursorPos();
writeNum(mask.charAt(curPos-1),-1);
window.event.returnValue=false;
MoveCursor(-1);
}
else{
if(code==37 && mask.charAt(curPos-1)!="#")
MoveCursor(-1);
else if(code==39 && mask.charAt(curPos+1)!="#")
MoveCursor(1);
}
}
if(code==46) window.event.returnValue=false;
}
//替換文本框中光標所在位置的下一個或上一個字符為輸入值或默認的初始值
//flag 1:輸入 -1: 退格
function writeNum(keyNum,flag)
{
var rng=document.selection.createRange();
if(flag>0)
rng.moveEnd("character",flag);
else
rng.moveStart("character",flag);
//alert(rng.text);
rng.text=keyNum;
}
//取得當前光標位置
function getCursorPos()
{
var len=mask.length;
var pos=0;
var rng=document.selection.createRange();
rng.moveEnd("character",len);
try{
pos=len-rng.text.length
}catch(e){}
return pos;
}
//向前或向后移動光標一位 flag 1:向前 -1 :向后
function MoveCursor(flag)
{
var rng =element.createTextRange();
rng.moveStart("character",getCursorPos()+flag);
rng.collapse(true);
rng.select();
}
//判斷keypress事件輸入是否為數字true:是 false:不是
function IsNumber(keyNum)
{
return !isNaN(parseInt(keyNum));
}
//取消事件
function eventCancel()
{
with (window.event)
{
cancelBubble = true ;
returnValue = false ;
}
return false ;
}
//獲得焦點事件
function doFocus()
{
if(mask.charAt(getCursorPos())!="#")
MoveCursor(1);
}
//統一的檢查函數
function doCheck()
{
//根據需要檢查錄入的內容是否合法
switch(element.check){
case "date": checkDate(); break;
default: return;
}
}
function checkDate()
{}
</script>放在一個目錄下即可運行
- 1 回答
- 0 關注
- 117 瀏覽
添加回答
舉報
0/150
提交
取消