借鉴这位兄台: http://www.hansir.cn/blog/2008/20080527-21.html
的写法做了一个数字输入提示的小玩意
/**
* 显示在输入框下面的输入提示, 适用于特定格式的数字输入
* 比如电话号码, 日期, 时间, 邮编等
* @param {Object} eid 输入框的id
* @param {Object} format 提示信息的格式, 默认为日期格式"YYYY-MM-DD"
* @param {Object} sChar 分隔字符, 默认为"-"
*/
var Tip = function(eid, format, sChar){
// 输入框节点
this.eInput = null;
if (typeof eid == 'string') {
eInput = document.getElementById(eid);
}
else {
eInput = eid;
}
// 字符串格式, 默认是日期字符串格式
this.format = format || 'YYYY-MM-DD';
// 分隔字符, 默认是短横线
this.sChar = sChar || '-';
// 提示层
this.tip = null;
this.init(eInput);
}
Tip.prototype = {
init: function(eInput){
// 初始化
// 计算输入框的位置
var inp = eInput;
var inpW = inp.offsetWidth, inpH = inp.offsetHeight;
var left = 0, top = 0, width = 0, height = 0;
while (inp != null) { // 循环计算offsetParent的位置并加权
left += inp.offsetLeft;
top += inp.offsetTop;
inp = inp.offsetParent;
}
height = inpH;
width = inpW - 2;
top = inpH + top;
// 创建提示层
var tip = document.createElement('tip');
// 提示层的样式
tip.style.padding = '2px 5px';
tip.style.fontFamily = 'Arial';
tip.style.fontSize = '14px';
tip.style.letterSpacing = '1px';
tip.style.textAlign = 'center';
tip.style.background = '#fffff6';
tip.style.color = '#f60';
tip.style.border = '1px solid #ccc';
tip.style.position = 'absolute';
tip.style.visibility = 'hidden';
tip.style.lineHeight = height + 'px';
tip.style.height = height + 'px';
tip.style.width = width - 2 * 5 + 'px';// 减去Padding
tip.style.left = left + 'px';
tip.style.top = top + 'px';
tip.innerHTML = this.format;
this.tip = tip;
document.body.appendChild(tip);
//----------------------------------- 注册事件
var oThis = this;
eInput.onfocus = function(){
oThis.show.call(oThis);
}
eInput.onblur = function(){
oThis.hide.call(oThis);
}
eInput.onkeypress = function(e){ //键盘按下事件
e ? intKey = e.which : intKey = event.keyCode;
return oThis.keyPress.call(oThis, intKey);
}
eInput.onkeyup = function(e){
e ? intKey = e.which : intKey = event.keyCode;
oThis.display.call(oThis, intKey, eInput);
}
},
show: function(){
// 显示提示层
this.tip.style.visibility = 'visible';
},
hide: function(){
// 隐藏提示层
this.tip.style.visibility = 'hidden';
},
keyPress: function(intKey){
// 键盘按下
return (new RegExp('[\\d' + this.sChar + ']').test(String.fromCharCode(intKey)) ||
(intKey == 0 || intKey == 8));
},
display: function(intKey, eInput){
// 显示输入框及提示框的值
if (intKey == 37 || intKey == 39)
return; // 左右键不检测
this.forInput(intKey, eInput);
this.forTip(eInput);
},
forInput: function(intKey, eInput){
// 输入框的值处理
var inStr = eInput.value;
if (intKey == 8) {
return inStr; // 退格键检测
}
// 计算需要添加分隔符的临界值数组
var aItems = this.format.split(this.sChar);
var aAddChar = new Array();
if (aItems.length >= 2) {
for (var i = 1; i < aItems.length; i++) {
var temp = null;
for (var j = 0; j < i; j++) {
temp = temp + aItems[j].length;
}
temp = temp + i - 1;
aAddChar.push(temp);
}
}
// 如果字符串的长度跟数组的项相等, 则添加分隔符
for (var k = 0; k < aAddChar.length; k++) {
if (inStr.length == aAddChar[k]) {
inStr = inStr + this.sChar;
}
// 检查分隔符位, 如果输入的是数字, 则转换为分隔符
if (inStr.charAt(aAddChar[k]) && inStr.charAt(aAddChar[k]) != this.sChar) {
inStr = inStr.slice(0, aAddChar[k]) + this.sChar;
}
}
// 如果输入字符串比指定格式的长, 则只获取指定格式部分
if (inStr.length > this.format.length) {
inStr = inStr.slice(0, this.format.length);
}
// 输入框的值
eInput.value = inStr;
},
forTip: function(eInput){
/* 提示框的值处理 */
// 输入后提示信息的样式
var styleA = '<span style="font-weight:bold; color:green">';
var styleB = '</span>';
// 输入字符串的长度
var inLength = eInput.value.length;
// 拼接提示信息
var hightLine = this.format.slice(0, inLength);
var lowLine = this.format.slice(inLength, this.format.length);
// 提示DIV的值
this.tip.innerHTML = styleA + hightLine + styleB + lowLine;
}
}
用法:
// 用法
window.onload = function(){
new Tip('simple');
new Tip('phone', '0755-####-####');
new Tip('time', 'HH:mm:ss', ':');
}
效果如下:
总结:
优点: 1. 分隔字符的自动输入.
2. 兼容IE,FF.
缺点: 1. 没有提供完成输入后的回调函数.
2. 没有数值验证(比如: 日期可以输入9999-99-99)
3. 不能同时具有多种分隔符(比如: 日期时间: 2009-10-8 15:08:56)
JS 新手第一贴, 欢迎拍砖.
- 大小: 4.3 KB
- 大小: 3.3 KB
- 大小: 3.5 KB
分享到:
- 2009-10-08 15:09
- 浏览 841
- 评论(2)
- 论坛回复 / 浏览 (1 / 3805)
- 查看更多
相关推荐
Javascript,简称为 JS,是一款能够运行在 JS解释器/引擎 中的脚本语言 JS解释器/引擎 是JS的运行环境: 1、独立安装的JS解释器 - NodeJS 2、嵌入在浏览器中的JS解释器 JS的发展史: 1、1992年 Nombas 开发...
数据格式不正确时会给出提示,有或者没有逗号(千位分隔符)的格式都可以检测。 将压缩文件解压到Scripts文件夹,在Akelpad中就可以使用了。 相比Excel,这个脚本可以直接对一段文字中的数字求和,而且文本编辑器...
3.js控制生成的随机数与输入的数字比较 4.根据相比的结果提示并显示相应的图片 5.猜测次数默认是6次,6次没有猜中则为游戏挑战失败,点击重新开始按钮可重新开始 6.6次中有一次猜中则为胜利,猜中后不论还剩几次都将...
Js封装版网页提示框插件,这里面是一些前端开发常用的提示框插件,比如Alert警告框、Confirmation弹出确认框、Prompt带输入内容的确认框、Custom Popup自定义的弹出消息框、Auto Close自动关闭的弹出框、Async ...
本文实例讲述了JS实现至少包含字母、大小写数字、字符的密码等级的两种方法。分享给大家供大家参考。具体如下: 前言 密码,如果设置的太简单,很容易就被攻破,所以很多网站将密码设置的要求设置的挺严格,一般是...
每一个页面,只要加入一段javascript脚本就能使用,经过1个多月的努力,终于初步实现的功能,首先在数字报纸上使用:目的是使语音技术能在互联网更广泛的应用。每一个页面,只要加入一段javascript脚本就能使用,...
1. 输入n个数字,输入0结束,输出这n个数字的平均值,最大值和最小值 2. 计算1+3+5+…+99的结果 3. 计算1+10+100+1000+10000的结果 4. 计算1+11+111+1111+11111的结果...11. 输入一个十进制数字,输出对应的二进制数字
JS和html实现的猜数字小游戏实现码中的JavaScript部分主要是通过两个函数guessNumber()和newGame()来实现猜数字游戏的功能。 当玩家输入数字,点击“猜一下”按钮或按下回车键时,guessNumber()函数会被调用。在该...
Js双日历控件,在一个网页上同时显示两个日期选择器,写成了封装类,方便使用者调用。同时美化的相当不错。 包括了以下函数: 1、2012——2020年节假日信息(包括节假日前1~3天/后1~3天) 2、格式化数字,...
adornment.js 一个有用的ES7类装饰器库。 安装 npm install adornment --save 菜单 描述符装饰器 类装饰器 方法装饰器 咖喱 咖喱权利 推迟 延迟(等待:数字) 油门(等待:数字) 去抖(等待:数字) 一次 ...
5.设计一个网页,输入一串用英文逗号分隔的数字字符串。编写程序,输出找出该组数中的最大、最小值、和 。并按从大到小排序后的输出结果(以逗号分隔)。 6. 要求用户在文本框中年份,点击判断按钮,用alert函数输出...
这个C#实现的小游戏是一个简单的猜数字游戏,让玩家猜一个1到100之间的随机生成的数字。以下是对这个小游戏的分析: Random 类的使用:游戏开始时,使用 Random 类生成一个1到100之间的随机数作为要猜的数字。 ...
下面是关于 HTML 数字计算和机器人验证测试...编写 JavaScript 代码来验证用户的输入是否与计算出的结果匹配,并给出相应的提示。 以下是一个简单的例子,展示了如何使用 HTML、CSS 和 JavaScript 创建数字计算的表单:
Validate.js是一个轻量级的JavaScript表单验证类库,它不依赖于其它任何JavaScript框架,经GZIP压缩后仅有1KB大小。它所提供的验证类型有:是否为空、数字、Email地址、判断输入值是否在某一范围内等,此外你也可以...
49.引用一个文件式的JS:<script type="text/javascript" src="aaa.js"> 50.指定在不支持脚本的浏览器显示的HTML:<noscript> 51.当超链和ONCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:;return ...
这个C#实现的小游戏是一个简单的猜数字游戏,让玩家猜一个1到100之间的随机生成的数字。以下是对这个小游戏的分析: Random 类的使用:游戏开始时,使用 Random 类生成一个1到100之间的随机数作为要猜的数字。 ...
是一个限制用户大小写加限制粘贴,关键是做一个提示用户还剩余多个字符的text时,出了好多问题(使用BACKSPACE会出乱)! 最后发现是要把所有的事件都写在ONKEYUP里。。写ONKEYPRESS时不支持BACKSPACE,写ONKEYDOWN...
本博文源于js基础,旨在讨论如何实现猜随机数的小游戏。 题目重现 随机生成一个[0,100]区间的数字,不断重复用户输入,直到用户输入对为止。 实现原理 先用Math.random生成一个数字,欲得到[a,b]区间的随机整数,可...
<asp:TextBox TabIndex="1" class="vtip" title="请录入8个数字" MinLength="8" MaxLength="8" ID="txtReportCode" runat="server"></asp:TextBox>
JavaScript email验证等数据验证 js数据验证、js email验证、js url验证、js长度验证、js数字验证等 非弹出对话框形式