用 Javascript 实现只能输入数字的文本框

在制作表单(Form)的时候,我们通常会给表单元素添加一些输入规则,比如邮件地址、数字等,我们会在特定的时候执行验证,如果验证不通过,会给出一定的提示信息,本文介绍的是用 Javascript 实现只能输入数字的文本框:

用 Javascript 实现只能输入数字的文本框 – 示例

执行验证可以有以下几种方式:
1. 在输入的时候验证,这种验证有一定的特殊性,比如只能输入数字或者只能输入英文字符这样的规则才能应用,如果是 email 验证就不行。

2. 在输入完成时验证,即在 onblur 事件发生时验证。这个适用范围很广,基本上验证都可以使用。

3. 在提交表单时执行验证,即表单的 onsubmit 事件中执行验证。可以一次验证所有元素,适用范围最广。

三种方式第一种实时性最高,输入的时候就验证,第二种次之,在输入完成后验证,第三中最慢,必须在提交时验证,不过每种都有自己的好处和局限性,在应用中可以根据实际情况选用。

本文验证方式是只能输入数字,带有一定的特殊性,可以选用第一种:

 
<script type="text/javascript">
 
// 说明 : 用 Javascript 实现只能输入数字的文本框
// 整理 : CodeBit.cn ( http://www.CodeBit.cn )
 
function checkNumber(e)
{
	var key = window.event ? e.keyCode : e.which;
	var keychar = String.fromCharCode(key);
	var el = document.getElementById('test');
	var msg = document.getElementById('msg');
	reg = /d/;
	var result = reg.test(keychar);
	if(!result) 
	{
		el.className = "warn";
		msg.innerHTML = "只能输入数字";
		return false;
	}
	else
	{
		el.className = "";
		msg.innerHTML = "";
		return true;
	}
}
 
</script>
 
<div id="test">
	请输入数字:<input type="text" onkeypress="return checkNumber(event);" />
	<span id="msg"></span>
</div>

当我们在此元素中输入时,检测用户按键,如果不是数字键,就显示提示信息,实时性较强,当然,我们也可以采用另外两种方式。

让你的文本框(input)更加丰富多彩!

经常看到一些网站的文本框有一些很不错的效果,比如搜索关键词文本框里面有一个象征搜索的小图片,或者是文本框边框非常柔和。其实,这些效果制作都非常简单,看过本文,相信你也可以实现丰富多彩的文本框效果。

让你的文本框(input)更加丰富多彩! – 示例

为你的文本框加一个说明用途的小图标

 
<style type="text/css">
 
input.txtInput {
	background: #fff;
	background-repeat: no-repeat;
	background-position: 2px center;
	border:1px solid #999;
	padding:2px 2px 2px 20px;
}
input.searchInput {background-image: url(search.gif);}
input.commentInput {background-image: url(comments.gif);}
 
</style>

上面的代码中 input.txtInput 定义了文本框中有小图标的通用样式,其中 padding 的第四个值是定义文字内容从 20 象素处开始,原因是本文的图片是 16 象素大小,文字四周有 2 象素的边距。具体到实际应用,需要根据你的图片大小决定。

然后,我们又定义了 searchInput commentInput 两个文本框样式,分别设置了2个不同的小图标。这样,我们在设置文本框的 class 时可以这样写:

 
<p>
<label for="keyword">搜索:</label> 
<input type="text" name="keyword" id="keyword" class="txtInput searchInput" />
</p>
 
<p>
<label for="comment">评论:</label> 
<input type="text" name="comment" id="comment" class="txtInput commentInput" />
</p>

为你的文本框加一个效果柔和的边框

 
<style type="text/css">
 
input.borderInput {
	background-image: url(border.gif);;
	background-repeat: no-repeat;
	background-position: left top;
	border:1px solid #d5dee9;
	padding:3px;
}
 
</style>

上面的代码设置了一个背景图,并且左上对齐,当然,我们这个图片通常要宽一些、高一些,然后设置一个和渐变颜色近似的 border 。是的,一个效果柔和的边框实现了。

文本框(input)获取焦点(onfocus)时样式改变的实现方法

许多重视用户体验的设计师都希望给文本框(input)加上获取焦点或者鼠标悬停时的样式切换效果。其实很简单,我们只需要获取页面上的文本框,加上onfocus事件或者其他对应的事件即可。本文介绍了如何在获取焦点时切换样式,明白原理后,实现其他效果就很简单了。

文本框(input)获取焦点(onfocus)时样式改变的实现方法 – 示例

 
<script type="text/javascript">
// 说明:文本框(input)获取焦点(onfocus)时样式改变的实现方法
// 整理:http://www.CodeBit.cn

// focusClass : 获取焦点时的样式
// normalClass : 正常状态下的样式
function focusInput(focusClass, normalClass) {
	var elements = document.getElementsByTagName("input");
    for (var i=0; i < elements.length; i++) {
        if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
            elements[i].onfocus = function() { this.className = focusClass; };
            elements[i].onblur = function() { this.className = normalClass||''; };
        }
    }
}
</script>

测试代码:

 
<style type="text/css">
.normalInput {
	border:1px solid #ccc;
}
.focusInput {
	border:1px solid #FFD42C;
}
</style>

<script type="text/javascript">
window.onload = function () {
	focusInput('focusInput', 'normalInput');
}
</script>

文本框:<input type="text" class="normalInput" />