类似于PB的editmask的可自行设置mask的输入控件

类似于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>
   <p>&nbsp;&nbsp;&nbsp;&nbsp;合法检查函数根据需要自己完成</P>
   <p>引用方法: &lt;input type="text" check="date"  mask="####-##-## ##:##" class="txtMask"....&gt;</P>
   <p>css样式: .txtMask{ background-color:#FFFFCC; behavior: url(meixx.htc);}
</P>
   <p>code by meixx</P>
   <p>2005-04-06</P>
   <br><br>
  </td>
 </tr>
 <tr>
  <td>
   日期时间输入:<input type="text" name="txtMask" check="date" id="txtMask" mask="####-##-## ##:##" size=20 class="txtMask">&nbsp;&nbsp;&nbsp;&nbsp;
   例如可输入:2005-04-06 15:00
  </td>
 </tr>
</table>
</body>
</html>
********************************************************
//meixx.htc

<!--

作者:梅雪香(meixx)
时间:2005-04-61
描述:格式化输入控件
-->

<!--
接口定义
-->
<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>

放在一个目录下即可运行

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值