如何使回车键根据哪个字段为空单击不同的按钮？-解网

问：

我有一个使用 vb 编码 asp.net Web 表单，它有多个文本框和按钮。如果一个文本框为空，我希望在按下回车键时单击一个按钮，而如果另一个文本框为空，我希望在按下回车键时单击另一个按钮。我知道我可以更改表单部分中的默认按钮，但我不知道如何根据哪个文本框是空的来更改默认按钮？我想我必须在javascript中做到这一点，我对此知之甚少，因此任何帮助将不胜感激。

我可以做这样的事情来更改默认按钮吗？

If txtMembranePressure.Text = "" Then
    Dim sb As New System.Text.StringBuilder()
    sb.Append("<form id='form1' runat='server'" + "defaultbutton='btnMembranePressure'")
Else
    Dim sb As New System.Text.StringBuilder()
    sb.Append("<form id='form1' runat='server'" + "defaultbutton='btnDiamondPressure'")
End If

我可以像这样将默认按钮直接放在表单上吗？

asp.net vb.net 事件 “文本框 defaultbutton

0赞 user246821 6/23/2022

请提供一个最小的、可重复的例子来说明你所描述的内容。如果适用，在您的帖子中添加图片也可能是有益的。

0赞 Fawlty 6/23/2022

上面提供的代码根本不起作用。runat=“server” 项必须在 aspx 页中声明，或者如下所示：将 TextBox1 调暗为 TextBox = New TextBox TextBox1.Id=“TextBox1” Page.Controls.Add（TextBox1）但是，您不能添加这样的窗体。这会让你非常头疼。在 .NET 页面上只能有一个 runat=“server” 窗体。

答：

0赞 robni 6/23/2022 #1

有 3 个步骤要做。

您需要知道文本框何时更改。为此，您可以使用 .TexboxChanged Event
您需要知道，如果 .Textbox is empty
您需要知道如何更改 .default button

每个 Textbox 都需要一个 TextboxChanged 事件。在每种情况下，您都应该检查文本框是否为空。如果它为空，则应将其设置为默认值。

在伪代码中：

if Textbox.Text = "" then
set Textbox to default

有关文本框更改 EVent 的详细信息，请在搜索引擎（例如 duckduckgo.com）中搜索“文本框更改事件”：

https://meeraacademy.com/textbox-autopostback-and-textchanged-event-asp-net/

要更改默认按钮，请考虑以下 Stackoverflow 的答案：如何在 ASP.Net 中为 TextBox 设置默认按钮？

0赞 robni 6/23/2022

这个答案是否有助于您自己编写解决方案，还是需要更多帮助？

0赞 amelia zaripova 6/23/2022

我应该把这个代码放在哪里？将其直接放在 TextBoxChanged 事件的 VB 代码中不允许我将某些内容设置为默认值并给我错误

0赞 robni 6/23/2022

您无法复制此代码段。这是伪代码。你需要阅读我回答中的全文。

0赞 amelia zaripova 6/23/2022

我很困惑将文本框设置为默认值会做什么

2赞 Albert D. Kallal 6/23/2022 #2

拥有一次单击例程不是更好吗 - 所有按钮都可以自由地指向该单击例程 - 但是在该单击例程中，您可以自由检查给定文本框的值，然后运行所需的代码。这似乎比尝试更改应该单击的实际按钮要复杂得多。因此，让所有按钮都运行相同的例程，但该例程可以简单地检查哪些文本框中有值。

然后，根据哪些文本框具有（或没有）值，您可以根据此信息简单地运行或调用所需的代码。

请记住，在大多数情况下，按回车键将触发该文本框后面标记中控件后面的按钮。编辑：更正：页面上的第一个按钮将触发。

但是，您可以通过在按钮标记中设置 usesubmitBehaviour=False 来关闭此行为

<asp:TextBox ID="txtSearchOC" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button"
    UseSubmitBehavior="False" />

事实上，如果你在窗体上放一个文本框，那么假设一个有 10 行的网格视图，而网格视图的每一行都有带有点击事件的按钮？点击上面的回车键实际上会触发网格视图的第一行按钮单击!!

因此，通常通过正确放置按钮，比如说一个搜索文本框，以及一个按钮之后点击“搜索数据”，那么实际上，如果他们按回车键，该文本框后面的按钮无论如何都会触发。（如前所述，标记上的第一个按钮会触发 - 不是任何按钮，或者实际上不是文本框后面的按钮）。

因此，在某些情况下，文本框的正确顺序以及后面的按钮可以在这里得到很好的利用。但是，它经常会让你大吃一惊。你放入一个文本框，一个表单后面有 10 个按钮，其中一个按钮会在你按回车键时触发 - 这通常更难防止这种情况发生。

因此，请记住上述内容。但是，假设您希望代码基于文本框中的值（或缺少值）运行，那么我将有一个按钮单击全部使用的例程，然后隐藏的代码可以检查文本框值，并采取所需的操作过程并根据此信息运行所需的代码。

0赞 amelia zaripova 6/23/2022

我想我明白我该怎么做，但是我怎样才能将默认按钮更改为这些按钮之一？根据我的理解，您所描述的内容仍然会导致我必须在运行任何过程之前物理单击该按钮，我将如何使输入按钮运行该过程？我知道我可以去掉一个按钮，只有一个计算按钮来确定哪个文本框是空的，并基于它运行正确的过程，但为了防止混淆，我需要有两个按钮

0赞 Albert D. Kallal 6/23/2022

您可以拥有两个按钮。但是，请记住，如果他们输入文本并按回车键，则将单击文本框后面的第一个按钮。但是，我不明白为什么有两个按钮会是问题？这两个按钮可以运行一键事件，或者每个按钮可以有自己的单击事件。但是，这两个按钮都可以自由检查文本框的值并执行所需的操作。因此，我认为两个按钮没有问题 - 它们都可以检查文本框的值。但是，请记住上述规则 - 当他们按回车键时，会单击文本框后面的按钮

0赞 Albert D. Kallal 6/23/2022

所以你可以开始搞砸javascript，但我认为这条路不是必需的。我的意思是，您将使用哪些信息来运行默认按钮？由于该信息来自表单，因此让两个按钮选中文本框值，或者根据最初条件执行任何操作来“更改”默认行为。也许您可以考虑根据输入隐藏一个按钮，这可以很好地减少这里的混淆，但这些按钮可以自由地测试/检查输入的数据并做任何您想做的事情。因此，为 2 个按钮提供了一些额外的逻辑。

0赞 amelia zaripova 6/23/2022

啊，所以你是说让每个按钮运行相同的过程，只要先检查哪个文本框是空的？我本质上是创建一个计算器来计算膜压力或金刚石压力，并输入多个输入，包括膜压力、金刚石压力、直径等。我看到的唯一问题是，如果单击“计算膜压力”按钮并且“金刚石压力”字段为空，则我已编写了一条错误消息以返回并说缺少输入。但是，如果我这样做，那么该错误消息现在不会弹出，它只会计算另一个错误信息吗？

0赞 amelia zaripova 6/23/2022

另外，您说文本框后面的按钮是单击的按钮吗？我发现我创建的第一个按钮始终是单击的按钮，无论哪个文本框具有焦点。

0赞 Fawlty 6/23/2022 #3

我在下面为您提供了足够的细节和示例代码，以便您自己重新设计它，即使我不太理解您的要求。我同意上面的评论，这可能不是最好的方法。最好在服务器端检查是否填充了文本框，然后在代码中遵循不同的路径。

JQuery 允许您按类名查找元素（在 .NET 中为 CssClass=“”，在普通 HTML 元素上为 class=“”）

$(".ClassName“）使 JQuery 在页面上查找具有该类名的所有元素。 $（“#Id”）使 JQuery 在页面上查找具有该 ID 的所有元素。

data-whatYouWantToStore 是一种针对元素存储数据的便捷方式，然后您可以使用 Javascript / JQuery 读取这些数据。只需将其全部保持小写即可避免打扰它。

$（element）.data（“data-bit后面的名称”）将得到值。

要使其运行，唯一需要更改的位是文本框：

data-targetbuttonemptyclass="js-button-1" data-targetbuttonnotemptyclass="js-button-2"

如果属性中的文本框为空，则设置在按下 Enter 时希望单击的按钮的类，如果属性中存在文本，则设置要单击的按钮。如果文本框上必须设置了类，才能让它们由“空/非空”的 JavasScript 处理。data-targetbuttonemptyclassdata-targetbuttonnotemptyclassjs-click-if-not-empty

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Buttons.aspx.vb" Inherits="Scrap.Buttons" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!--Add reference to Jquery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!--Your Javascript -->
    <script type="text/javascript">
        $(document).ready(function () {
            // find all the buttons we want to set this behaviour on
            $(".js-click-if-not-empty").each(function () {
                // add a keypress event hander to each button
                $(this).on("keypress", function () {
                    // get the key that was pressed
                    var keycode = (event.keyCode ? event.keyCode : event.which);
                    // is it the ENTER key?
                    if (keycode === 13) {
                        // prevent anything else that was going to happen because enter was pressed.
                        event.preventDefault();
                        // is the textbox empty?
                        if ($(this).val() === "") {
                            // yes - get the css class of the button to click when the textbox is empty 
                            var button = $("." + $(this).data("targetbuttonemptyclass"))[0];
                            // just for debugging to show which button is about to be clicked
                            alert("going to click empty button: " + button.id);
                            // click the button
                            button.click();
                        } else {
                            // no - get the css class of the button to click when the textbox is not empty
                            var button = $("." + $(this).data("targetbuttonnotemptyclass"))[0];
                            // just for debugging to show which button is about to be clicked
                            alert("going to click not empty button: " + button.id);
                            // click the button
                            button.click();
                        }
                    };
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="tb_TextBox1" runat="server" CssClass="js-click-if-not-empty" data-targetbuttonemptyclass="js-button-1" data-targetbuttonnotemptyclass="js-button-2"></asp:TextBox>
            <asp:TextBox ID="tb_TextBox2" runat="server" CssClass="js-click-if-not-empty" data-targetbuttonemptyclass="js-button-1" data-targetbuttonnotemptyclass="js-button-2"></asp:TextBox>
            <asp:TextBox ID="tb_TextBox3" runat="server" CssClass="js-click-if-not-empty" data-targetbuttonemptyclass="js-button-1" data-targetbuttonnotemptyclass="js-button-2"></asp:TextBox>
            <asp:Button ID="btn_ClickIfEmpty" runat="server" CssClass="js-button-1" Text="Click If Empty" />
            <asp:Button ID="btn_ClickIfNotEmpty" runat="server" CssClass="js-button-2" Text="Click If Not Empty" />
        </div>
    </form>
</body>
</html>

0赞 amelia zaripova 6/23/2022

对不起，如果这是一个愚蠢的问题，我对此很陌生，我会用 windows.jquery 替换 $ 的每个实例，并用适当的按钮名称替换每个实例吗？我很困惑我应该如何更改此代码以实际运行

0赞 Fawlty 6/23/2022

此代码将按原样运行。我为你添加了很多评论。我建议复制并粘贴并尝试一下。在浏览器上按 F12，然后转到“脚本”选项卡，然后在 javascript 上放置断点以查看其工作原理。我现在将编辑我的答案，以尝试提供更多细节。你只能通过实验来学习。

0赞 Lukas 9/15/2023 #4

在要指向单个按钮的所有控件周围添加asp：panel，在面板属性“DefaultButton”上提供您希望它使用的面板的ID！ 2分钟工作！

0赞 Chris Catignani 9/21/2023

这并不能提供问题的答案。一旦你有足够的声誉，你就可以对任何帖子发表评论;相反，提供不需要提问者澄清的答案。- 从评论

0赞 Community 9/22/2023

正如目前所写的那样，你的答案尚不清楚。请编辑以添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。您可以在帮助中心找到有关如何写出好答案的更多信息。

上一个：ComboBox 事件适用于 ListBox，但不适用于 GridView

下一个：Textbox 中的 TextChanged 事件不按顺序出现

如何使回车键根据哪个字段为空单击不同的按钮？

how to make enter key click on different buttons depending on which field is empty?

评论

评论

评论

评论

评论