重点使用jQuery更改表单输入（文本）的方式

用户体验一直是考虑的一个因素，而你设计一个网站。很多领域，如人机接口（HCI）和可用性等进行了研究后。在设计用户界面时，应特别注意始终被放置文本字段，然后选择字体。虽然很多网页设计师喜欢以普通的方式显示形式，很多人喜欢给用户尽可能多的帮助，同时填补了形式。因此，HTML表单中应始终与每个输入字段描述字段。此外，如果我们可以突出显示用户填写的方式，它可以提高用户体验。
 
因此，如何能实现的功能，这是目前的工作重点是突出的输入字段？
 烫画机  http://www.software8.co
让我们使用jQuery和一个HTML表单中创建一个简单的功能。
 
第1步：HTML代码
我们将使用以下格式的一个简单的HTML表格和使用jQuery的焦点效应。
<FORM id="sample">
    <TABLE>
    <TR>
        <TD>Name </TD>
        <TD><INPUT type="text"/></TD>
    </TR>
    <TR>
        <TD>Age</TD>
        <TD><INPUT type="text"/></TD>
    </TR>
    <TR>
        <TD>Phone no.</TD>
        <TD><INPUT type="text"/></TD>
    </TR>
</TABLE>
</FORM>
 

第2步：CSS样式表
 
我们将使用一个简单的样式类应用的重点领域。
 
.focus {
    border: 2px solid #AA88FF;
    background-color: #FFEEAA;
}
 
第3步：添加效果使用jQuery
 
我们将使用jQuery的表单元素的添加效果。两个事件有被照顾的。当输入领域的重点和焦点移动到下一个文本框（blured）。
$('input[type="text"]').focus(function() {
    $(this).addClass("focus");
});
 
$('input[type="text"]').blur(function() {
    $(this).removeClass("focus");
});
在线演示