JavaScript在ASP页面中实现掩码文本框效果代码
来源:asp之家 发布时间:2013-06-01 19:57:23
最近在做一个程序正好需要用到此方面,在网上找到过相应的程序,但用起来都非常恶,于是乎只好自己实现一个了。
首先实现两个函数用来操作光标:
代码如下:
// 得到一个文本框控件的当前光标位置
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;
}
// 设置一个文本框控件的当前光标位置
function setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);
range.select();
}
主要函数实现的主要思想是当键盘按下时进行一些操作,我设计在onKeyDown事件中。
在onKeyDown中,首先将系统默认的键盘处理屏蔽掉
代码如下:
// 封住传统处理
window.event.returnvalue = false;
然后处理相应需要处理的键盘消息。
这里随便处理几个必要的就可以了,因为文本框本身也不需要什么太多的用户操作,所以把光标的前移、后移、删除操作进行处理,这样你的文本框就有了基本的操作,现在操作起来已经很顺手了。
代码如下:
// 自行处理按钮
switch (nKeyCode)
{
case 8:// 如果动作是退格[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
break;
}
case 46:// 如果动作是del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
break;
}
case 38:// 如果动作是方向键[上]
case 39:// 如果动作是方向键[右]
{
nCursorPos++;
break;
}
case 37:// 如果动作是方向键[左]
case 40:// 如果动作是方向键[下]
{
nCursorPos--;
break;
}
default :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
if (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
break;
}
}
其它的任何消息都当添加一个字符,可见不可见的字符,都将添加并光标往后走一下。见上方的default 处理部份。
然后判断掩码是否正确,如果正确,那么此次输入合法,将值显示添加到文本框中。
代码如下:
if (strText.match(expMask))
{
// 输入格式正确
objTextBox.value = strText;
}
最后将光标移到适当的位置。
// 移动光标
setCursor(objTextBox,nCursorPos);
完成!
其主要就是把系统的键盘消息替换成自己的处理,屏蔽掉系统的,这样就可以获得最大的操控。
如此就完成了一个对指定的正则表达式进行格式限制的TEXTBOX就诞生了。
代码如下:
// 根据指定正表达式,来控制OBJ表示
function mask(objTextBox,mask)
{
// 掩码
expMask = new RegExp(mask);
// 当前文本框中的文本
var strText =objTextBox.value;
// 文本长度
var nTextLen=strText.length;
// 当前光标位置
var nCursorPos=getPos(objTextBox);
// 按下的键码
var nKeyCode = window.event.keyCode;
if (nKeyCode > 95) nKeyCode -= (95-47);
// 封住传统处理
window.event.returnvalue = false;
// 自行处理按钮
switch (nKeyCode)
{
case 8:// 如果动作是退格[<-]
{
strText = strText.substr(0,nCursorPos-1) + strText.substr(nCursorPos, nTextLen-nCursorPos);
nCursorPos--;
break;
}
case 46:// 如果动作是del[del]
{
strText = strText.substr(0,nCursorPos) + strText.substr(nCursorPos+1,nTextLen-nCursorPos-1);
nCursorPos--;
break;
}
case 38:// 如果动作是方向键[上]
case 39:// 如果动作是方向键[右]
{
nCursorPos++;
break;
}
case 37:// 如果动作是方向键[左]
case 40:// 如果动作是方向键[下]
{
nCursorPos--;
break;
}
default :
{
strText = strText.substr(0,nCursorPos) + String.fromCharCode(nKeyCode) + strText.substr(nCursorPos,nTextLen);
nCursorPos++;
if (nCursorPos>strText.length)
{
nCursorPos=strText.length;
}
break;
}
}
if (strText.match(expMask))
{
// 输入格式正确
objTextBox.value = strText;
}
// 移动光标
setCursor(objTextBox,nCursorPos);
}
// 得到一个文本框控件的当前光标位置
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;
}
// 设置一个文本框控件的当前光标位置
function setCursor(obj,num){
range=obj.createTextRange();
range.collapse(true);
range.moveStart('character',num);
range.select();
}
使用方法:
1.设置默认的、不定的格式初值。如:日期时间的格式初值为“// ::”,表示(年/月/日 时:分:秒)。IP的为“...”(192.168.0.1)。其实就是设置一个不会违反正则表达式的字符就可以。
2.在表单的TEXT框的onKeyDown事件中调用mask函数,参数objTextBox是指定的文本框的name。参数mask是正则表达式格式的掩码。
例子:
要使用日期时间型的掩码框
代码如下:
<input name="i_etmend" type="text" id="i_etmend" value="{I_ETMEND}" maxlength="19" onkeydown="mask(i_etmend, '^(([0-9]{0,4})\-([0-9]{0,2})\-([0-9]{0,2}) ([0-9]{0,2}):([0-9]{0,2}):([0-9]{0,2}))$')">
要使用IP掩码框
代码如下:
<input name="i_bip" type="text" id="i_bip" value="{I_BIP}" maxlength="15" onkeydown="mask(i_bip, '^([0-9]{0,3}[\.][0-9]{0,3}[\.][0-9]{0,3}[\.][0-9]{0,3})$')">
猜你喜欢
- MySQL支持的两种主要表存储格式MyISAM,InnoDB,上个月做个项目时,先使用了InnoDB,结果速度特别慢,1秒钟只能插入10几条
- 在ASP中Request对象是获取客户端提交数据的一个很重要的对象,大家对他也是非常熟悉了。 虽然如此,还是经常有人问我下面的几种写法有什么
- [本站原创]在我们浏览了一些网页时,经常会弹出一些信息窗口或浏览器窗口以显示一些公告内容,想知道这些窗口是怎么制作出来的吗?如果你还不曾知道
- 当你使用UPDATE, INSERT, DELETE语句更新数据的时候,你就改变了两个地方的数据:log buffer和data buffe
- 这个url的正则表达式判断的js!是比较全面的。它验证的情况包括!IP,域名(domain),ftp,二级域名,域名中的文件,域名加上端口!
- asp之家注:学习asp网页编程的朋友一定用过ACCESS数据库,access的简单方便,大大降低了asp初学者学习asp的门槛,对于学习a
- this指针是面向对象程序设计中的一项重要概念,它表示当前运行的对象。在实现对象的方法时,可以使用this指针来获得该对象自身的引用。和其他
- 如何让animate在显示图片的过程保持窗口的标题不变animate -title "My Image Sequence"
- 如何在ADO中客户端利用好缓存技术?具体应用见下例:global.asa< !--METADATA TYPE=&q
- 国 * 公司安全团队开发出利用赛门铁克数据库安全与审计(SDSA)设备监视数据库的一系列客户化的政策。他们是如何在已有安全策略基础上做优
- 此文章主要向大家描述的是MySQL高级查询方法之记录查询的实际操作步骤,以及对其实际操作过程中要用到的代码的详细描述,以下就是文章的主要内容
- 上一课:ACCESS入门教程:初识Access 2000窗口接口简介 通过上一课的学习,你是否感觉Access的窗口和接口还有点搞不清楚,对
- 1.表达式操作符Table 1 算术操作符操作符 语法 含义+ a + b 相加 - a - b 相减 - - a
- 1. 停应用层的各种程序。 2. 停oralce的监听进程: $lsnrctl stop 3. 在独占的系统用户下,备份控制文件: SQL&
- 内容摘要:Microsoft建立了一种既灵活又强大的安全管理机制,它能够对用户访问SQL Server服务器系统和数据库的安全进行
- 内容摘要:本文介绍了对数据库的基本操作:数据记录筛选(select),更新数据库(update),删除记录(delete),添加数据记录(i
- 如何制作一个倒计时的程序? 见下:<%CountdownDate = #1/1
- SQL Server四类数据仓库建模的方法主要分为以下四类。第一类是关系数据库的三范式建模,通常我们将三范式建模方法用于建立各种操作型数据库
- 想要asp能连接mysql数据库需要安装MySQL ODBC 3.51 驱动 http://www.jb51.net/softs/19910
- 此文档是一位高手同事Hewei的原创实践总结,过程真是精彩,最后修复损坏数据库取得圆满效果,值得收藏的一篇好文章。前几天因为mysql数据库