让你的文本框(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 。是的,一个效果柔和的边框实现了。

如何用图片实现表单(form)的重置(reset)按钮

合理的运用图片,能够使站点更加丰富多彩,相信有许多喜欢用图片的设计师都遇到过一个问题:用图片实现表单(form)的重置(reset)按钮时,这个按钮并不能重置表单,相反却执行了提交表单的操作,本文说明了这个问题的原因,并给出了相应的解决方案。

出现上述问题的原因主要是:普通的按钮是通过类型来区分的,submit 为提交按钮,reset 为重置按钮,而类型为图片(type="image")的按钮,其默认操作是提交表单。因此,如果想用图片实现重置按钮,就需要一些额外的设置了。

如何用图片实现表单(form)的重置(reset)按钮 – 示例

一个简单包含提交、重置按钮的表单代码如下:

 
<form method="post" name="testForm_1" action="">
	<p><input type="text" name="keyword" /></p>
	<input type="submit" value="Submit" />
	<input type="reset" value="Reset" />
</form>

如果想用图片代替重置按钮,可以用下面的方法:

(1)给 type 为 image 的 input 添加 onclick 事件来实现重置,并通过添加 return false 来避免默认的提交操作:

 
<form method="post" name="testForm_2" action="">
	<p><input type="text" name="keyword" /></p>
	<input type="image" src="send.gif" />
	<input type="image" src="reset.gif" onclick="javascript:document.forms['testForm_2'].reset(); return false;" />
</form>

关键代码:

 
onclick="javascript:document.forms['testForm_2'].reset(); return false;"

document.forms[‘testForm_2′].reset(); 是将名称为 testForm_2 的表单重置。

return false; 是防止提交表单。

(2)直接用图片模拟的重置按钮

 
<form method="post" name="testForm_3" action="">
	<p><input type="text" name="keyword" /></p>
	<input type="image" src="send.gif" />
	<img src="reset.gif" alt="Reset" onclick="javascript:document.forms['testForm_3'].reset();" style="cursor:pointer;" />
</form>

关键代码:

 
onclick="javascript:document.forms['testForm_3'].reset(); "
 
style="cursor:pointer;"

document.forms[‘testForm_2′].reset(); 是将名称为 testForm_2 的表单重置。

style="cursor:pointer;" 设置图片悬停时,显示手型光标。

两种方法大同小异,在 javascript 被禁止的情况下,第二种方法按钮不会执行任何操作,而第一种方法却会执行提交操作。

当然,我们也可以直接把样式交给 CSS 去处理,用背景图的方式来实现,但是这样需要将 value 的值留空,如果 CSS 被禁止,那么将会显示一个没有文字的按钮,每个方法都有自己的问题,可以根据自己的需要来选择解决方案。

Javascript 获取页面上选中的文字

在一些特殊应用中,我们需要获取页面上选中的文字,但是要实现这一需求,我们不得不面对那恼人的兼容问题,本文介绍了一个兼容性较好的解决方法。同时,也提供了一个在 FireFox 下获取 input 和 textarea 中选中文字的解决方案。

Javascript 获取页面上选中的文字 – 示例

获取选中的普通页面上的文字,可以用下面的方法:

 
<script type="text/javascript">
 
// 说明:获取页面上选中的文字
// 整理:http://www.CodeBit.cn
 
function getSelectedText() {
	if (window.getSelection) {
		// This technique is the most likely to be standardized.
		// getSelection() returns a Selection object, which we do not document.
		return window.getSelection().toString();
	}
	else if (document.getSelection) {
		// This is an older, simpler technique that returns a string
		return document.getSelection();
	}
	else if (document.selection) {
		// This is the IE-specific technique.
		// We do not document the IE selection property or TextRange objects.
		return document.selection.createRange().text;
	}
}
 
</script>

在 FireFox 下获取 input 或者 textarea 中选中的文字,可以用下面的方法:

 
<script type="text/javascript">
 
// 说明:FireFox 下获取 input 或者 textarea 中选中的文字
// 整理:http://www.codebit.cn
 
function getTextFieldSelection(e) {
	if (e.selectionStart != undefined && e.selectionEnd != undefined) {
		var start = e.selectionStart;
		var end = e.selectionEnd;
		return e.value.substring(start, end);
	}
	else return "";  // Not supported on this browser
}
 
</script>

文本框(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" />

Javascript 控制 CheckBox 的全选与取消全选

在批量处理列表数据时,往往会用到 CheckBox 的全选与取消全选,虽然她的实现原理很简单,但是对新手来说还是有些难度,本文介绍的方法,触发条件独立,可以全选或取消全选指定 name 的 CheckBox , 同一页面可以有多组供全选的 CheckBox ,功能健全,通用性较强。

Javascript 控制 CheckBox 的全选与取消全选 – 示例

 
<script type="text/javascript">
<!--
// 说明:Javascript 控制 CheckBox 的全选与取消全选
// 整理:http://www.CodeBit.cn

function checkAll(name)
{
	var el = document.getElementsByTagName('input');
	var len = el.length;
	for(var i=0; i<len; i++)
	{
		if((el[i].type=="checkbox") && (el[i].name==name))
		{
			el[i].checked = true;
		}
	}
}
function clearAll(name)
{
	var el = document.getElementsByTagName('input');
	var len = el.length;
	for(var i=0; i<len; i++)
	{
		if((el[i].type=="checkbox") && (el[i].name==name))
		{
			el[i].checked = false;
		}
	}
}
//-->
</script>

用法示例:

 
<input type="checkbox" name="test" value="" onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" /> 字母全选开关
<input type="checkbox" name="test" value="a" /> a
<input type="checkbox" name="test" value="b" /> b
<input type="checkbox" name="test" value="c" /> c
<input type="checkbox" name="test" value="d" /> d
<input type="checkbox" name="test" value="e" /> e
<input type="checkbox" name="test" value="f" /> f
<input type="checkbox" name="test" value="g" /> g

<br />

<input type="checkbox" name="num" value="" onclick="if(this.checked==true) { checkAll('num'); } else { clearAll('num'); }"  /> 数字全选开关
<input type="checkbox" name="num" value="1" /> 1
<input type="checkbox" name="num" value="2" /> 2
<input type="checkbox" name="num" value="3" /> 3

<br /><br />

<input type="button" value="选择所有的字母" onclick="checkAll('test')" />
<input type="button" value="清空选中的字母" onclick="clearAll('test')" />

<br /><br />

<input type="button" value="选择所有的数字" onclick="checkAll('num')" />
<input type="button" value="清空选中的数字" onclick="clearAll('num')" />