如何在ASP.Net中设置TextBox的默认按钮?

5

我有一个页面有两个按钮,btnSearch和btnAddUser。如下所示的aspx页面。你可以看到默认按钮是btnAddUser。但是当我在文本框txtFilter中输入内容时,我想将默认按钮设置为btnSearch。我添加了一个JavaScript函数clickButton,在page_load中添加了以下代码。问题是当我在文本框中输入内容后按回车键时,btnSearch和btnAddUser都被点击了。有没有办法让btnAddUser不被点击。

 txtFilter.Attributes.Add("onkeypress", "return clickButton(event, '" + btnSearch.ClientID + "')");

<asp:Panel ID="MainPanel" runat="server" DefaultButton="btnAddUser">
    <table align="center" width="900">
        <tr>
            <td align="left" width="70%">
                <asp:TextBox ID="txtFilter" runat="server" Width="200"></asp:TextBox>
                <asp:Button ID="btnSearch" runat="server" Text="Search" 
                    onclick="btnSearch_Click" CausesValidation="false" />
            </td>
            <td align="right" width="30%">
                <asp:Button ID="btnAddUser" runat="server" Text="Add User" Width="85px" 
                    CausesValidation="False" onclick="btnAddUser_Click" />
            </td>
        </tr>
        <tr>
...
</asp:Panel>

function clickButton(e, buttonid) {
            var evt = e ? e : window.event;
            var bt = document.getElementById(buttonid);
            if (bt) {
                if (evt.keyCode == 13) {
                    bt.click();
                    return false;
                }
            }
        }

更新: 在谷歌搜索后,我发现了以下解决方案。它似乎有效。但是在Firefox上不起作用?有人知道如何解决吗?

function clickButton(e, buttonid) {
            var evt = e ? e : window.event;
            var keycode = evt.keyCode || evt.which || evt.charCode;
            var bt = document.getElementById(buttonid);
            if (bt) {
                if (keycode == 13) {
                    evt.cancelBubble = true;
                    evt.returnValue = false;
                    if (evt.stopPropagation) {
                        evt.stopPropagation();
                        evt.preventDefault();
                    }
                    bt.click();
                    return false;
                }
            }
        }

这个链接可能会对你有所帮助: http://www.codeproject.com/Articles/35180/How-To-set-Default-Button-for-ENTER-key-pressed-ev - Krishna
你可能想研究一下jQuery的 keypress 事件。它往往更加可靠。http://api.jquery.com/keypress/ - SouthShoreAK
对于 Firefox,您的标准CTRL / ALT / SHIFT可以在e.originalEvent中找到。例如,e.originalEvent.shiftKey(您可以使用firebug查看其他内容) - clamchoda
3个回答

13

你不需要 JavaScript,只需将搜索文本框放置在另一个面板中并设置默认按钮,类似于这样(我删除了表格标记):

  <asp:Panel ID="MainPanel" runat="server" DefaultButton="btnAddUser">
    <asp:Panel ID="searchPanel" runat="server" DefaultButton="btnSearch">
      <asp:TextBox ID="txtFilter" runat="server" Width="200"></asp:TextBox>
      <asp:Button ID="btnSearch" runat="server" Text="Search" 
        CausesValidation="false" onclick="btnSearch_Click" />
    </asp:Panel>
    <asp:Button ID="btnAddUser" runat="server" Text="Add User" Width="85px" CausesValidation="False" onclick="btnAddUser_Click" />
  </asp:Panel>

你在 txtFilter 文本框中按回车键了吗?我在 IE、Firefox、Chrome 中进行了测试,只有搜索按钮被点击了。你能否请用这个标记创建一个小项目并进行测试。 - Antonio Bakula
当你按下回车键时,焦点在哪个其他控件上? - Antonio Bakula
我在我的页面上只有一个文本框、一个网格视图和几个按钮。 - GLP
他们在mainpanel里面吗?我尝试将TextBox放在btnAddUser上方,它可以正常工作。 - Antonio Bakula
它是否有效?请评论此方法存在的问题,或接受答案。 - Al Kepp
显示剩余4条评论

0
TextBox 放入一个 Panel 中,并设置 DefaultButton 属性。
<asp:Panel runat="server" DefaultButton="btnSearch">
    <asp:TextBox ID="txtFilter" runat="server" Width="200" />
    <asp:Button ID="btnSearch" runat="server" Text="Search" 
        onclick="btnSearch_Click" CausesValidation="false" />
</asp:Panel>

-1

JavaScript

<script language="javascript" type="text/javascript">
    function kPress(evnt, ID) {
        var ButtonID = ID.id;
        var btnSearchID = ButtonID.replace('txtFilter', 'btnSearch');
        document.getElementById(btnSearchID).click();
    }
</script>

HTML

<asp:TextBox ID="txtFilter" runat="server" Width="200" onkeypress="kPress(event, this);"></asp:TextBox>

我忘了提到,我正在使用主/内容页。但是我尝试了你的方法,不起作用。 - GLP
它同样适用于内容页面。你尝试过在你的Javascript代码中设置调试器吗? - Pankaj
是的。每次我尝试输入内容时,它都会进入JavaScript函数,甚至不等我按下回车键。 - GLP
只有在文本框中按下回车键时,我才希望搜索按钮被点击。否则默认按钮是btnAddUser。 - GLP

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接