表单中改进的当前字段高亮

查看演示

出于可用性和美观性的考虑，在网页表单中添加某种视觉反馈以指示当前**活动**（或“聚焦”）字段是一个好主意。某些浏览器（Safari/Opera）认为这**非常**重要，因此它们会主动采取措施，并在活动表单元素周围应用一个发光的蓝色边框。

对于非Safari/Opera浏览器，CSS通过:focus伪类提供一些帮助。您可以像这样声明您自己的焦点样式

input:focus {
      background: #fc9fff;   /* sexy hot pink */
}

这是一个好的开始，但它有一些不幸的缺点。

• 它在某些浏览器（IE）中不起作用。
• 它只突出显示字段本身，而对相应的标签没有任何作用。

我们将解决这两个缺点，使用jQuery改进我们当前的字段高亮。我们的表单HTML看起来就像任何其他表单标记一样，除了每个标签/输入组都将包装在一个DIV中。

<form>
	<div class="single-field">
		<label for="Name">Name:</label>
		<input name="Name" type="text"></input>
	</div>
	<div class="single-field">
		<label for="Email">Email:</label>
		<input name="Email" type="text"></input>
	</div>
</form>

使用jQuery，我们可以监视输入表单进入焦点的事件。

$(document).ready(function(){
	$("input").focus(function() {
		....do something....
	});
});

在这里，我们可以做一些CSS单独无法做到的事情，我们可以跳到该输入元素的父元素，并影响它。在我们的例子中，父元素是我们围绕每个标签/输入对放置的div包装器。我们想要做的是在输入获得焦点时，将一个唯一的类应用于该div。

$(document).ready(function(){
	$("input").focus(function() {
		$(this).parent().addClass("curFocus");
	});
});

使用CSS，我们可以根据需要设置该唯一类的样式！

div.curFocus {
	background: #fdecb2;
}

这非常有效，但是如果我们就这样保留它，每个字段在获得焦点时都会应用此类，并且永远不会被移除。这里的重点是，这个“当前字段高亮”只应用于“当前字段”。幸运的是，jQuery为我们提供了“blur”事件，它是焦点的反面。让我们为此添加代码。

$(document).ready(function(){
	$("input").focus(function() {
		$(this).parent().addClass("curFocus")
	});
	$("input").blur(function() {
		$(this).parent().removeClass("curFocus")
	});
});

我们不一定要在removeClass函数中指定“curFocus”，因为留空将移除所有类，但以防我们有多个类，让我们保留它。

但是等等！您的示例在活动字段上具有超酷的圆角！哈哈，确实如此！我永远不会说！呃。嗯。好吧，我会说的。

每个角都是一个小div，需要放在每个字段包装器div中。由于它们完全相同，并且需要在每个包装器div中，所以让我们通过jQuery应用它们，并避免不必要的重复标记。

…通过JavaScript动态生成语义标记有一种深深的满足感。摘自：Karl Swedberg & Jonathan Chaffer 编著的《学习jQuery》

我同意。我们可以将任何HTML片段转换为jQuery对象。然后，我们将使用“appendTo”函数将其插入每个div中。看看吧

$('<div class="tl"></div><div class="tr"></div><div class="bl"></div><div class="br"></div>').appendTo("div.single-field");

在我们的CSS中，我们将设置它们的样式，但将其display值保留为“none”，这样它们在我们想要之前就不会显示。

.tl {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: url(images/corner-topleft.jpg);
	display: none;
}
.tr {
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background: url(images/corner-topright.jpg);
	display: none;
}
.bl {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background: url(images/corner-bottomleft.jpg);
	display: none;
}
.br {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background: url(images/corner-bottomright.jpg);
	display: none;
}

我们将使用jQuery在我们需要时切换所有这些div的可见性。这是最终的javascript代码。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("input").focus(function() {
			$(this)
				.parent()
					.addClass("curFocus")
				.children("div")
					.toggle();
		});
		$("input").blur(function() {
			$(this)
				.parent()
					.removeClass("curFocus")
				.children("div")
					.toggle();
		});
		$('<div class="tl"></div><div class="tr"></div><div class="bl"></div><div class="br"></div>').appendTo("div.single-field");
	});
</script>

查看演示