类似于PB的editmask的可自行设置mask的输入控件,大家帮我测一下,并给出测试环境和bug,谢谢

梅雪香 2005-04-06 04:01:53
类似于PB的editmask的可自行设置mask的输入控件,大家帮我测一下,并给出测试环境和bug,谢谢

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>    合法检查函数根据需要自己完成</P>
<p>引用方法: <input type="text" check="date" mask="####-##-## ##:##" class="txtMask"....></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">    
例如可输入: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);
}
}
}
//替换文本框中光标所在位置的下一个或上一个字符为输入值或默认的初始值
//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>

放在一个目录下即可运行
...全文
430 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
underone 2005-04-11
  • 打赏
  • 举报
 回复
学习
mark
梅雪香 2005-04-11
  • 打赏
  • 举报
 回复
根据input对象中check值的不同，会调用不同的验证函数，这里的checkDate（）只是举个例子，而且没有实现代码，如果输入的是IP，可以设置<input check="IP" ...>
在doCheck里加 case "IP": checkIP(); break;
就可以调用对应的校验函数了

这个不只适用于输入日期，也可以用于输入IP地址，格式固定的电话号码
所需要做的只是改变源码里input控件的mask属性值就可以了
如输入IP：###.###.###.###
电话： ####-#######-####
sfply 2005-04-10
  • 打赏
  • 举报
 回复
如果#换成空白可能更容易接受些
不过偶觉得这个似乎没有太大用处啊
因为偶一般都是点击弹出CALENDAR控件直接选日期的不用手工输入
梅雪香 2005-04-08
  • 打赏
  • 举报
 回复
有什么改进意见也提提啊
patchclass 2005-04-08
  • 打赏
  • 举报
 回复
测试了，不错
checkDate()
函数是写 检验输入的数据合法性的吧，自己写？
为什么不干脆把日期的合法性验证写进去呢，比如 闰年的判断，时间有效格式的判断
ken2002 2005-04-07
  • 打赏
  • 举报
 回复
收藏了，一会儿测试
梅雪香 2005-04-07
  • 打赏
  • 举报
 回复
<!--

作者：梅雪香(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>
patchclass 2005-04-07
  • 打赏
  • 举报
 回复
如果删除了#号输入就会错误

光标如果停在 #中间时候也输入有错误，最好自动判断下
梅雪香 2005-04-07
  • 打赏
  • 举报
 回复
meizz > meixx
meizz 2005-04-06
  • 打赏
  • 举报
 回复
meizz != meixx
笨笨兔兔兔兔兔 2005-04-06
  • 打赏
  • 举报
 回复
*^_^*你俩啥关系啊??
梅雪香 2005-04-06
  • 打赏
  • 举报
 回复
sorry,没仔细想想就发上来了,最后一句 window.event.returnValue=false;
换成:
if(code==46) event.returnValue=false;
meizz 2005-04-06
  • 打赏
  • 举报
 回复
window.event.returnValue=false;
这是你新加的吧. 加了这句代码之后, 没法子输入了!!
梅雪香 2005-04-06
  • 打赏
  • 举报
 回复
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);
}
}
window.event.returnValue=false;
}
替换原文中该函数
xjdawu 2005-04-06
  • 打赏
  • 举报
 回复
好用
------------------
没有屏蔽Delete键
myvicy 2005-04-06
  • 打赏
  • 举报
 回复
不错。
meizz 2005-04-06
  • 打赏
  • 举报
 回复
好呀好呀, 再加上一个日期验证就完美了.
pb editmask控件改进
pb的editmask控件点击上下箭头不触发事件，只有当控件失去焦点时才会触发modifyed事件，此代码实现了按上下箭头时实时触发相关事件ue_up和ue_down
5个PB做的日期控件
平时日期处理就用EditMask显得太单调了，有了这些控件，可以做出类似于windows自带的日期控件的效果
在PB中使用日期时间控件
在PowerBuilder中如何调用日期时间控件，
可以在PB DW中使用的日历控件
PB DATAWINDOW中输入日期是个比较痛苦的 即使使用EDITMASK也不方便 本对象可以在DW中下拉出日历控件，使用方便。
powerbuilder 日期选择及打印设置的实用模块
将 d_calender gf_center_window gf_server_date vu_calendar vu_dateselect w_calendar 导入到pbl中 在目标窗体上 创建继承vu_dateseelct 的editmask控件，在doubleclike 事件中为 ----------------------------------------------------------------------- date ld_date ld_date=this.Getdate() openwithparm(w_calendar,string(ld_date,"yyyy.mm.dd")) if message.stringparm<>"" and not isnull(message.stringparm) then this.setdate(date(message.stringparm)) end if 打印支持模块 提供打印设置，预览及数据引出功能 ----------------------------------------- 使用方法: 将w_print_setup.srw 和 w_support_preview.srw 导入到pbl 中 假设需要打印的数据窗体控件为dw_1 则在打印按钮的click事件中添加 openwhithparm(w_print_setup,dw_1)
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章