通常在網頁中添加大量內容時,為了便捷,需要實現斷行符號替代Tab鍵,按照次序填寫內容.
由於在asp.net中fouce函數中有功能,既控制項聚焦.但是如果要實現斷行符號替代Tab鍵還得需要指令碼語言來實現.
其實原理很簡單,在頁面事件中,檢測window.event.keyCode為13(既斷行符號的索引值),替換為9(既Tab鍵的索引值).
<script language="JavaScript" type="text/javascript">
<!--
window.document.attachEvent("onkeydown" , function(){
if(window.event.keyCode==13){
window.event.keyCode = 9;
}
});
//-->
</script>
當然,要使asp.net頁面中的控制項按照一定的次序來"Tab",必須設定這些控制項的TabIndex值,依照你所需要的順序來編製.
<asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Department" TabIndex="1"></asp:TextBox><br />
<asp:TextBox ID="TextBox2" runat="server" TabIndex="2"></asp:TextBox><br />
<asp:TextBox ID="TextBox3" runat="server" TabIndex="3"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox4" runat="server" TabIndex="4"></asp:TextBox><br />
<asp:TextBox ID="TextBox5" runat="server" TabIndex="5"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Button" /></div>
該例只實現了斷行符號替代Tab鍵,但是在真正需要斷行符號的時候,卻只能是用滑鼠點擊按鈕了.本人想實現一種更理想的方案,當所有文字框都已經填寫完畢,正好聚焦(Tab)到了提交按鈕時,按斷行符號就直接提交了,這個想法若有人能實現,請在此留言,本人感激不盡!
全部代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無標題頁</title>
<script language="JavaScript" type="text/javascript">
<!--
window.document.attachEvent("onkeydown" , function(){
if(window.event.keyCode==13){
window.event.keyCode = 9;
}
});
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" AutoCompleteType="Department" TabIndex="1"></asp:TextBox><br />
<asp:TextBox ID="TextBox2" runat="server" TabIndex="2"></asp:TextBox><br />
<asp:TextBox ID="TextBox3" runat="server" TabIndex="3"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox4" runat="server" TabIndex="4"></asp:TextBox><br />
<asp:TextBox ID="TextBox5" runat="server" TabIndex="5"></asp:TextBox><br />
<asp:Button ID="Button1" runat="server" Text="Button" /></div>
</form>
</body>
</html