最經有一個項目是給化工廠做的在使用的過程中需要輸入大量的數據,使用的都是小鍵盤區(qū),在以前都是通過excel錄入數據的現在,
在網頁上需要實現excel 那樣的回車換行的功能在網上找了有關這方面的問題但是都不怎么好用,也有人提供了這方面的思路如何來做,
經過本人的整理和測試,能夠很好的解決這個問題:
需要的條件
1,Jquery庫地址可以到jquery.com官網上去下載最新的
2,查看界面表單的結構和相對應的表單位置
以下是一些才是表單結構
復制代碼 代碼如下:
<fieldset>
<legend>登錄表單</legend>
<ol>
<li>
<asp:Label runat="server" AssociatedControlID="UserName">用戶名</asp:Label>
<asp:TextBox runat="server" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用戶名字段是必填字段。" />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="UserName">用戶名</asp:Label>
<asp:TextBox runat="server" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用戶名字段是必填字段。" />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="UserName">用戶名</asp:Label>
<asp:TextBox runat="server" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用戶名字段是必填字段。" />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="UserName">用戶名</asp:Label>
<asp:TextBox runat="server" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用戶名字段是必填字段。" />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="UserName">用戶名</asp:Label>
<asp:TextBox runat="server" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用戶名字段是必填字段。" />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="UserName">用戶名</asp:Label>
<asp:TextBox runat="server" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用戶名字段是必填字段。" />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="UserName">用戶名</asp:Label>
<asp:TextBox runat="server" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用戶名字段是必填字段。" />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="UserName">用戶名</asp:Label>
<asp:TextBox runat="server" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用戶名字段是必填字段。" />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="UserName">用戶名</asp:Label>
<asp:TextBox runat="server" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName" CssClass="field-validation-error" ErrorMessage="用戶名字段是必填字段。" />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="Password">密碼</asp:Label>
<asp:TextBox runat="server" TextMode="Password" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password" CssClass="field-validation-error" ErrorMessage="密碼字段是必填字段。" />
</li>
<li>
<asp:CheckBox runat="server" />
<asp:Label runat="server" AssociatedControlID="RememberMe" CssClass="checkbox">記住我?</asp:Label>
</li>
</ol>
<asp:Button runat="server" CommandName="Login" Text="登錄" />
</fieldset>
復制代碼 代碼如下:
<script type="text/javascript">
$(function () {
var i = 0;//索引
//以上的表單位置和上下文之間的關系就是label 后面總會有一個input 標簽type 可能是Password 可能是text 或者是其他的
//可以按照個人需求修改,這里只定位到type="text" 的表單如果是又有表單的話改成 $("label+ input") 即可按個人需求
$("label+ :text").each(function () {
$(this).keydown(function (e) {
if (e.keyCode == 13) {
i++;//下一個定位的索引
try {
$("label+ :text")[i].focus();
} catch (e) {//到了最后一個的下一個可能找不到元素會出現異常通過try 捕捉不至于程序出現異常
return false;//必須要寫以免錯誤信息被提交
}
return false;//必須要寫以免錯誤信息被提交
}
});
});
});
</script>
新聞熱點
疑難解答
圖片精選