借鉴这位兄台: 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
- 浏览 883
- 评论(2)
- 论坛回复 / 浏览 (1 / 3833)
- 查看更多
相关推荐
内容概要:这篇文章详细地指导读者使用前端框架 Vue.js 结合 Vite 构建工具搭建起一个简洁的猜数字小游戏。从环境的配置到项目的初始化再到界面布局和核心功能的编码都进行了详细的描述,尤其是针对如何使用 Vite ...
标题 "calculator-js:计算器-Javascript" 指的是一款用JavaScript编写的计算器应用。JavaScript是一种广泛使用的编程语言,尤其在Web开发中,它用于为网页添加交互性。在这个项目中,开发者创建了一个基本的计算器...
本示例“js 判断输入是否是数字.rar”提供了一个JavaScript代码的Demo,用于检查用户输入的内容是否为空或者是否全由数字组成。在实际应用中,这样的功能可以确保用户提交的数据符合预期格式,避免无效数据的提交。 ...
`jQuery数字格式化分隔符代码`提供了一种高效的方法,将大数字转换为更易读的形式,通过添加分隔符如逗号或空格来提高可读性。这个插件允许开发者自定义分隔符,满足不同场景的需求。 首先,我们来理解jQuery的核心...
EasyExcel是一款由阿里开源的Java库,专门用于处理Excel读写,它简化了Excel操作,但在某些情况下,如遇到数字作为文本处理时,仍需了解其内在机制。 首先,我们来看一下为什么Excel单元格中的数字会被显示为文本。...
这里给出两种方法:一种是在用户键入时即时验证,另一种是在用户离开输入框后进行验证。 ##### 方法一:即时验证 可以使用`onkeyup`事件监听器来实现在用户每次按键后立即检查输入内容是否合法。示例代码如下: `...
### JS验证数字方法详解 #### 一、背景介绍 在Web开发中,经常需要对用户输入的数据进行合法性检查,特别是当涉及到数字时。JavaScript作为前端脚本语言,提供了丰富的工具来帮助开发者完成这一任务。本文将详细...
在JavaScript(JS)中,校验用户输入是否为纯数字是一项常见的需求,特别是在表单验证或者数据处理的场景。在给定的代码片段中,我们看到了一个简单的JS函数用于检查输入字段是否只包含数字。下面将详细解释这个过程...
用户每猜一次,程序会给出提示:猜对了位置的数字用“A”表示,仅猜对数字但位置不对的用“B”表示。例如,“2A1B”意味着玩家猜对了两个数字的位置,还有一个数字是对的但位置不对。 #### 二、关键代码解析 #####...
JS猜数字游戏的HTML脚本编程基础 本资源是一个HTML脚本文件,主要使用JavaScript语言编写,旨在实现一个猜数字游戏。下面是该资源的知识点摘要: 一、HTML基本结构 * DOCTYPE声明:`<! DOCTYPE ...
JavaScript是一种广泛应用于网页和网络应用的轻量级编程语言,尤其在前端开发中扮演着重要角色。在网页表单中,数字验证是确保用户输入数据有效性和安全性的关键环节。本话题将深入探讨如何使用JavaScript编写数字...
例如,一个文本框可能只允许用户输入数字、小数点和减号,这样的需求可以通过设置一个特定的正则表达式来实现。下面我们将详细讨论如何构建这样的正则表达式以及其背后的工作原理。 首先,我们需要明确允许输入的...
JavaScript(简称JS)是一种轻量级的脚本语言,广泛应用于网页和网络应用开发,尤其在前端领域。在这个项目中,我们将探讨如何使用JS来实现一个数字拼图游戏。数字拼图游戏通常由一张完整的图像分割成多个小块,玩家...
### JS正则表达式验证数据格式详解 #### 一、概述 在JavaScript中,正则表达式被广泛用于数据格式的验证,例如邮箱地址、电话号码、网址等。本篇文章将详细解读一个示例代码片段,它展示了如何利用正则表达式进行...
JavaScript 验证数字邮箱示例代码详解 在本资源中,我们将详细介绍 JavaScript 验证数字邮箱的示例代码,包括数字验证、字母数字下划线验证、固定电话验证和电子邮件地址验证等多种类型的验证。 一、数字验证 在 ...
这里使用了一个简单的正则表达式 `/^(\d{4})(\d{2})(\d{2})$/` 来匹配四位数字的年份、两位数字的月份以及两位数字的日期。 ```javascript var reg = /^(\d{4})(\d{2})(\d{2})$/; ``` 如果输入的日期不符合这个...
本项目提供了一个“数字键盘”,它具有纯JavaScript(js)和jQuery(jq)两个版本,适用于创建一个只允许输入数字的简单键盘。 首先,我们来探讨纯JavaScript实现的数字键盘。JavaScript是一种广泛使用的客户端脚本...
JavaScript是Web开发中不可或缺的一部分,尤其在前端交互和表单验证方面起着至关重要的作用。在用户输入数据或执行操作时,提供及时、友好的错误提示可以极大地提升用户体验。本篇文章将深入探讨如何使用JavaScript...
本文实例讲述了JS实现至少包含字母、大小写数字、字符的密码等级的两种方法。分享给大家供大家参考。具体如下: 前言 密码,如果设置的太简单,很容易就被攻破,所以很多网站将密码设置的要求设置的挺严格,一般是...
在日常开发工作中,经常需要处理财务相关的数据,比如将数字转换为大写人民币金额格式。这在发票、合同等正式文档中非常常见。下面我们就来详细分析一下如何用JavaScript实现这一功能。 #### 功能概述 此函数的主要...