<html>
<head>
<title>Jquery制作Tab键的效果 </title>
</head>
<script language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function()
{
//界面初始化
$("#operation_type").focus(); //设置焦点
$("#operation_type").select(); //选中文字
$("#inputArea .tab").keypress(function(e)
{
if (e.which == 13) //判断所按是否回车键
{
var inputs = $("#inputArea").find(".tab"); //获取表单中的所有输入框
var idx = inputs.index(this); //获取当前焦点输入框所处的位置
if (idx == inputs.length - 1) // 判断是否是最后一个输入框
{
inputs[0].focus(); //设置焦点
inputs[0].select(); //选中文字
//$("#operation_type").focus(); //设置焦点
//$("#operation_type").select(); //选中文字
}
else
{
inputs[idx + 1].focus(); //设置焦点
//inputs[idx + 1].select(); //选中文字
}
}
});
})
</script>
<body>
<table id="inputArea" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="4"><strong><font color='red'>温馨提醒:</font>1、带有红星标志的为必填；2、提交用Enter键</strong></td></tr>
<tr>
<td width="12.5%"><strong>业务类别:</strong></td>
<td ><!--<input type="text" name="operation_type" id="operation_type" maxlength="3"/>-->
<select name="operation_type" id="operation_type" onchange="operationType();" class="tab">
<option value="001">001卡</option>
<option value="002">002卡</option>
<option value="003">003卡</option>
<option value="004">004卡</option>
</select><strong class="high">*</strong>
</td>
<td width="12.5%"><strong>所属流程:</strong></td><td ><!--<input type="text" name="belong_type" id="belong_type" class="required" maxlength="1"/>-->
<select name="belong_type" id="belong_type" class="tab">
<option value="2">系统审批</option>
<option value="1">手工审批</option>
<option value="3">特殊审批</option>
<!--<s:iterator value="userList">
<option value="<s:property value='user_name' />"><s:property value="user_name" /></option>
</s:iterator>-->
</select><strong class="high">*</strong>
</td>
</tr>
<tr>
<td width="12.5%"><strong>优先级:</strong></td>
<td ><!--<input type="text" name="priority_level" id="priority_level" maxlength="10"/>-->
<select name="priority_level" id="priority_level" class="tab">
<option value="0">普通</option>
<option value="1">加急</option>
</select><strong class="high">*</strong>
</td>
<td width="12.5%"><strong>申请件ID:</strong></td>
<td ><input type="text" name="app_id" id="app_id" class="tab" maxlength="16" size="16" /><strong class="high">*</strong><!--<span id="app_id"></span>--></td>
</tr>
<tr>
<td width="12.5%"><strong>进件日期:</strong></td>
<td ><input type="text" name="incept_date" id="incept_date" class="tab" maxlength="10" /><strong class="high">*</strong></td>
<td width="12.5%"><strong>填表日期：</strong></td><td><input type="text" name="fill_date" id="fill_date" class="tab" maxlength="10" /></td>
</tr>
<tr>
<td width="12.5%"><strong>产品代码:</strong></td><td ><input type="text" name="product_type" id="product_type" class="tab" maxlength="5" /><strong class="high">*</strong></td>
<td width="12.5%"><strong>产品名称:</strong></td><td ><input type="text" name="product_name" id="product_name" class="tab" maxlength="18"/><strong class="high">*</strong></td>
</tr>
</table>
</body>
</html>