zoukankan      html  css  js  c++  java
  • 如何设置制定按钮为希望响应回车的真正按钮

      最近,在公司做项目的时候,遇见一件很有意思的事情。有这样一个需求:A页面有一个文本框,一个asp:Button,我们在文本框中输入内容后,按回车键,然后跳转到B页面(当然页面还有其他控件)。奇怪的是,断点调试显示此时已经触发了事件,但是就是不能跳转到B页面,更奇怪的是连续点击Enter键两次,才能够跳转到B页面。公司的同事一时也没能够解决,于是,本着学习的态度,研究如何设置制定按钮为希望响应回车的真正按钮。

      这里,我就从form表单提交事件聊起。

      在html页面中,如果我们需要把一个A页面的数据,提交到B页面,我们会这样写

    <form action="B.htm" method="get">
            <input type="text" name="txtName" />
            <input id="btnSure" type="submit" value="确认" />
        </form>

      此时,默认回车键是btnSure。

      那么,如何使用普通的button,设定回车触发事件呢?因为Enter键的ASCII码是13,且唯一,这个完全可以利用,代码如下。

    <body onkeypress="GoURLB()">
            <input type="text" name="txtName" />
            <input id="btnSure" type="button" value="确认" />
    </body>

      js函数如下

    <script type="text/javascript">
            function GoURLB() {
                if (event.keyCode == 13) {
                    window.open("B.htm", "_self");
                }
            }
     </script>

     由此,可见,在body中添加onkeypress可以完美解决这个问题。

     那么现在回到主题中来,asp.net的aspx页面如何设置Enter触发事件呢。如果回答这个问题,需要回到控件渲染的问题了,因为渲染过程比较复杂,以后再谈。这里说的比较简单点。

      当我们新建一个aspx页面,往页面里面拖拽一个asp:Button按钮,运行于浏览器中,然后查看源代码,我们可以清晰的看到,我们的这个Button,不是被渲染成<input type="button" id="btnSure" value="确认">,而是被渲染成<input type="submit" name="btnSure" value="确认" id="btnSure" />,截个图如下

      

      看见了吧,在红线1处,就是渲染成的Html代码,因此,如果一个页面上只有一个Button,那么肯定是默认的Enter键触发者了。其次,请注意划红线2的地方,已然多了 method="post" aciton="WebForm2.aspx",aciton的url正是本页面的URL,因此,为什么一个Button会有回发事件了,原因很简单:点击一次,就提交数据到本页面一次。在Jsp页面中,我们使用form表单,常常会指定一个Servlet,将数据发送到Servlet,让其进行处理,最后将处理后的数据再发回指定的页面,可能是本页面,也可能是其他页面。而WebForm页面的action似乎不够指定其他页面。

      如果我们有时候希望让asp:Button 呈现普通的button形式,如果做到呢,so easy,代码如下

    <asp:Button ID="btnSure" UseSubmitBehavior="false" runat="server" Text="确认" />

       此时,呈现的便是<input type="button">了,似乎没有太多的意义。

      那么,如何设置制定按钮为希望响应回车的真正按钮呢,很简单,代码如下

        <form id="form1" runat="server" defaultbutton="btnFirst">
      <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
    
    <asp:Button ID="btnFirst" runat="server" Text="Button" OnClientClick="CheckFirst()" /> <asp:Button ID="btnSecond" runat="server" Text="Button" OnClientClick="CheckSecond()" /> </form>

      我们只需要在form中将制定按钮的Id赋值给defaultbutton就行了,很简单,是吧,可是,有时候,在前台页面制定了,事件是触发了,却不能达到理想的效果,就如同我前面说到的一种情况,这时候怎么办呢??微软真是考虑周到了,前台不行,我们后台制定,如何制定,只需要一行代码,代码如下

    Page.Form.DefaultButton = "指定控件的ID";

      这段代码本人一般写在Page_Load事件里,效果挺好的,上面的问题也很好的解决了。注意细节:如果你的控件放在masterPage里面,请注意控件的真正ID是什么,因为此时的ID会被渲染成另外一种格式,据说微软是为了防范用户在同一个页面里面有两个ID相同的控件。当然如果我们使用的net 4.0,可以将控件的一个属性ClientIDMode设置成Static,这样控件的ID无论套了多少母板页,ID值都不会变,都是我们指定的ID,当然,ID的唯一性就得我们程序员去控制了。

      看起来挺简单的,但是也挺有意思的。

  • 相关阅读:
    xshell+xftp破解版下载安装以及使用教程
    XFTP安装和Xshell配置
    spark-shell的Scala的一些方法详解
    Xshell连接Linux系统
    虚拟机的使用克隆及网络配置
    dochub批量上传教程
    可汗儿童版kids安卓版下载安装教程
    2020年MySQL数据库面试题总结(50道题含答案解析)
    什么是a站、b站、c站、d站、e站、f站、g站、h站、i站、j站、k站、l站、m站、n站…z站?
    ApacheCN JavaWeb 译文集 20211017 更新
  • 原文地址:https://www.cnblogs.com/xianrongbin/p/2853845.html
Copyright © 2011-2022 走看看