施用jQuery创建一个清零的文本框

最近，我碰到由罗老师{ 清除的文本框上}的精彩文章 。这是一个简单的实现一个明确的按钮（X）添加一个文本框，让用户清除文本框的内容。我已经看到了这个简单的功能在许多网站，觉得非常有用。增加形式的可用性。

 

我想实现相同的功能，使用jQuery。下面是我写的一个简单的插件清除的功能添加到任何HTML表单的文本框。所有你需要的是文本框清零（）方法调用。例如。

...
...
<script type="text/javascript" src="jquery.clearable.js"></script>
<link rel="stylesheet" href="jquery.clearable.css" type="text/css" media="screen" />
 
...
...
 
<input type="text"  class="foo"></input>
 
<script>
$(document).ready(function() {
	$('.foo').clearable();
});
</scrip>

在上面的例子中，我们包括jquery.clearable的插件JavaScript和样式表文件。然后叫我们要添加的文本框可清除功能可清除（）方法。就是这样

 

让我们通过代码，看看究竟背后的jQuery中清除的插件现场。
CSS代码
我们用下面的样式表类内部显示

.divclearable {
	border: 1px solid #888;
	display: -moz-inline-stack;
	display: inline-block;
	zoom:1;
	*display:inline;
	padding-right:5px;
	vertical-align:middle;
}
 
a.clearlink {
	background: url("close-button.png") no-repeat scroll 0 0 transparent;
	background-position: center center;
	cursor: pointer;
	display: -moz-inline-stack;
	display: inline-block;
	zoom:1;
	*display:inline;
	height: 12px;
	width: 12px;
	z-index: 2000;
	border: 0px solid;
}

有两个CSS类，我们在清除的插件使用。第一个是一个包装DIV周围的文本框和清晰的按钮（X）包装。和风格类是明确的按钮（X）。

 

在JavaScript

插件的重要一点是JavaScript代码创建清除的效果。everytextbox，环绕一个DIV容器，并添加一个明确的按钮（X），在这个容器中的DIV。

 

这里是jQuery代码：

$(this).css({'border-width': '0px', 'outline': 'none'})
		.wrap('<div id="sq" class="divclearable"></div>')
		.parent()
		.attr('class', $(this).attr('class') + ' divclearable')
		.append('<a class="clearlink" href="javascript:"></a>');
 
	$('.clearlink')
		.attr('title', 'Click to clear this textbox')
		.click(function() {
 
			$(this).prev().val('').focus();
 
	});

在上面的javascript代码，我们做到：

 

我们要清除的功能添加，删除文本框的边界和轮廓

创建一个div包装和包装，DIV的文本框

添加文本框样式类DIV，所以添加到文本框中指定的边框/背景等DIV

创建一个明文（X）的链接，并追加在DIV

也为每一个清晰的文本链接（X）我们添加一个onclick处理程序，我们清除了相应的文本框和设置焦点。