老问题：CTRL+回车提交

服务器端的button和input,runat=server的。等页面浏览的时候，他们的ID都会变的，这样就没法用JS脚本实现操作了，因为找不到ID，总是报错：Error:'document.getElementById(...)' 为空或不是对象
网上的答案大都都是：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Submit.aspx.cs" Inherits="test_Submit" %>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head runat="server">
 5     <title>asp.net Ctrl 回车提交</title>
 6     <script type="text/javascript">
 7         //这种提交在asp.net下不会执行后台代码
 8         function submitForm(formName) { 
 9             if(window.event.ctrlKey&&window.event.keyCode==13) { 
10                 document.getElementById(formName).submit(); 
11             } 
12         }
13         //相当于按了一下提交按钮,所以此法在asp.net可行
14         function clickButton() { 
15             if(window.event.ctrlKey&&window.event.keyCode==13) { 
16                 document.getElementById("btnOk").click();
17             } 
18         }
19     </script>
20 </head>
21 <body>
22     <form id="form1" runat="server" name="form1">
23     <div>
24         <asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine" onkeydown="submitForm(this.form.name);"></asp:TextBox>
25         <br />
26         <asp:TextBox ID="txtBody" runat="server" TextMode="MultiLine" onkeydown="clickButton();"></asp:TextBox>
27         <br />
28         <asp:Button ID="btnOk" runat="server" Text="提交" onclick="btnOk_Click" />
29     </div>
30     </form>
31 </body>
32 </html>
文章来自学IT网：http://www.xueit.com/html/2009-09-29/21-1895695979250.html
可是这个例子怎么可能能实现呢？ 等页面发布的时候服务器端的button控件已经变更了ID了呀？ 请高手说下这个功能怎么实现。

解决方案 »

  1.   

    客户端的id是可变的,但你可以用(如服务端Button1,获得客户端的ID如下)
    document.getElementById("<%= Button1.ClientID %>");
      

  2.   

    当使用MasterPage、UserControl等容器时，为了避免控件的重复命名，asp.net会自动将容器中的控件生成一个ClientID（Control Tree中的可生成，否则不会生成）。 
    例如：ContentPlaceHolder1中的Button1默认情况下会生成“ctl00_ContentPlaceHolder1_Button1”的ClientID。 
    我们在Render出来的 up中看到的也是这些ClientID。所以，当我们使用JavaScript对控件元素进行操作的时候，必须使用ClientID来对控件进行查找。 
    Inline情况下的解决方案 
    如果JavaScript代码写在.aspx文件中时，也就是Inline Script时。在页面生成的时候，我们能够通过绑定机制将控件的ClientID绑定到页面Mark up中，故可使用： 
    document.getElementById("<%=Me.txtTest.ClientID %>" ) 
    来获取一个控件的真实引用，当然，FindControl等方法也可以写在<%=...%>中用来绑定服务端数据到客户端。 
    external JS情况下的解决方案 
    然而，部分情况下，为了解耦，我们常常把JavaScript单独写在.js文件中，再引用到aspx文件中去。这种情况下，.js文件内的代码不能通过<%=...%>来进行服务端数据的绑定，所以上面的方法是不能用的。 
    此时简单点的解决方案就是直接在JavaScript中写控件的ClientID，但这样增加了JS文件和ASPX的耦合度，非常不推荐使用。 
    我常用的方法有两种，在此抛砖引玉： 
    案例： 
    Default5.aspx是MasterPage.master 的内容页，本例中的主要文件。 
    JScript.js是一个外部的js文件，用来处理JavaScript操作。 
    Button1是Default5.aspx中的一个<ASP:Button>，用来显示效果。 
    Button2是Default5.aspx中的一个<input type=button>，用来触发JavaScript。 
    需求：点击Button2，将Button1上的文本改成“from extended js” 
    方案一：使用内联JS访问器 
    要想在外部JS中获得ASPX动态生成的ClientID，可以通过在ASPX页面中添加访问器的方式来实现，类似OO语言中的属性： 
    我们在Default5.aspx中添加如下代码： 
    作用：①声明getClientId访问器，并注册Button1的ClientID。②引用JScript.js文件 
    复制代码 代码如下:<script type="text/javascript"> 
    function getClientId() 
    { 
    var paraId1 = '<%= Button1.ClientID %>'; 
    return {Id1:paraId1}; 
    } 
    </script> 
    <script type="text/javascript" src="JScript.js"></script> 
    接下来，我们在JScript.js中，就可以这样来实现需求： 
    function ChangeText() 
    { 
    var btn=document.getElementById(getClientId().Id1); 
    btn.value="from extended js"; 
    } getClientId().Id1 貌似很OO，而且还支持VS2008很蹩脚的JS智能提示，打上“.”之后就可以在提示中选择Id1了 
    如果有多个控件需要注册，只需将他们注册到访问器中即可，下面是一个完整的Demo代码： 
    Default5.aspx 
    复制代码 代码如下:<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> 
    <script runat="server"> 
    </script> 
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
    <script type="text/javascript"> 
    function getClientId() 
    { 
    var paraId1 = '<%= Button1.ClientID %>';//注册控件1 
    var paraId2 = '<%= TextBox1.ClientID %>';//注册控件2 
    return {Id1:paraId1,Id2:paraId2};//生成访问器 
    } 
    </script> 
    <script type="text/javascript" src="JScript.js"></script>//引用外部js 
    </asp:Content> 
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
    <asp:Button ID="Button1" runat="server" Text="Button" /> 
    <input id="Button2" type="button" value="button" /> 
    </asp:Content> 
    JScript.js 
    function ChangeText() 
    { 
    var btn=document.getElementById(getClientId().Id1); 
    btn.value="from extended js"; 
    var btn=document.getElementById(getClientId().Id2); 
    btn.value="from extended js"; 
    } 方案二：使用JS全局变量 
    还有一种方法也比较OO，就是使用JS全局变量，同样，也需要在Default5.aspx中添加一段JS代码，作为全局变量，来提供ClientID： 
    复制代码 代码如下:<script type="text/javascript"> 
    var globals = {}; 
    globals.controlIdentities = {}; 
    globals.controlIdentities.someControl1 = '<%= Button1.ClientID %>'; 
    globals.controlIdentities.someControl2 = '<%= TextBox1.ClientID %>'; 
    </script> 
    <script type="text/javascript" src="JScript.js"></script> 接下来，我们在JScript.js中，就可以这样来实现需求： 
    复制代码 代码如下:function ChangeText() 
    { 
    var btn=document.getElementById(globals.controlIdentities.someControl1); 
    btn.value="from extended js"; 
    } globals.controlIdentities.someControl1，同样，也支持VS2008很蹩脚的JS智能提示，打上“.”之后就可以在提示中选择someControl1了 
    下面是一个完整的Demo代码： 
    Default5.aspx 
    复制代码 代码如下:<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %> 
    <script runat="server"> 
    </script> 
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
    <script type="text/javascript"> 
    var globals = {}; 
    globals.controlIdentities = {}; 
    globals.controlIdentities.someControl1 = '<%= Button1.ClientID %>'; 
    globals.controlIdentities.someControl2 = '<%= TextBox1.ClientID %>'; 
    </script> 
    <script type="text/javascript" src="JScript.js"></script> 
    </asp:Content> 
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> 
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
    <asp:Button ID="Button1" runat="server" Text="Button" /> 
    <input id="Button2" type="button" value="button" /> 
    </asp:Content> JScript.js 
    复制代码 代码如下:function ChangeText() 
    { 
    var btn=document.getElementById(globals.controlIdentities.someControl1); 
    btn.value="from extended js"; 
    var txt=document.getElementById(globals.controlIdentities.someControl2); 
    btn.value="from extended js"; 
    } 
      

  3.   

    什么叫做“id”会变？哪一个微软文档中说过服务器控件的ID就是所输出的html对象上的客户端id？只有Client属性输出的是客户端id！
      

  4.   

    ClientID 表示由服务器端生成的客户端控件的ID
      

  5.   

    UniqueID 用于获取服务器控件的唯一的、以分层方式表示的标识符。
      

  6.   

    其实我有个疑问，上次也问了个问题就是如果想把类似的js代码移植到一个js文件中就不行了
      

  7.   

    光标在在FCK中，以上所有方法均无效，有没有办法解决呢？