通过两个登录控件输入密钥

问题描述 投票：0回答：1

我正在更新一个 ASP 经典网站的上传和下载部分，该网站的主页（我没有更新）有一个“上传/下载”链接，该链接将用户带到一个带有两个登录控件的页面，一个用于上传，一个用于登录。一个可供下载，所以我试图保持相同的设计。

我试图让 Enter 键触发正确的“登录”按钮，具体取决于用户输入的登录控件。目前它始终执行页面上的第一个操作。

我找到了建议，但许多涉及按钮而不是登录控件。我尝试使用面板并将面板默认设置为检查页面时显示的 ID，但这给了我错误“‘PanlUL’的 DefaultButton 必须是 IButtonControl 类型的控件的 ID。”

我尝试将登录控件转换为模板，将登录按钮的名称更改为唯一的名称，但得到了与上面相同的错误。我怀疑是因为它们被“包装”在登录控件中。

将控件转换为模板后，我想我也许可以在代码后面的 TextChanged 事件中设置表单的默认按钮，但我无权访问代码后面的文本框。我再次想到，因为它们被“包装”在登录控件中。

将控件转换为模板后，我还尝试了一个 JavaScript 函数，在其中我能够准确获取调用该函数的文本框，并且我想我可以使用它来设置默认值：

this.Page.Form.DefaultButton = $('#<%= LoginButtonDL.ClientID %>')

但是 Visual Studio 告诉我“LoginButtonDL 没有声明。由于其保护级别，它可能无法访问。”同样，可能是因为它是登录控件的一部分。

我还看到this页面似乎正在设置一个可以选择性地调用右侧按钮的函数，但在我的菜鸟状态下，我不知道这段代码会去哪里。在某种 JavaScript 页面加载中？

这是我第一次涉足网络开发，所以我可能会错过一些基本的东西。任何帮助将不胜感激。

谢谢

javascript authentication asp-classic
1个回答
0
投票

要实现您想要的行为，即按 Enter 键会根据活动登录控件触发正确的“登录”按钮，您可以使用 JavaScript 动态处理 Enter 按键事件。这个想法是检测哪个输入字段是焦点，并根据该字段触发相应的按钮单击。

以下是实施此操作的分步指南：

  1. 识别输入字段和按钮：确保每个登录控件都有唯一可识别的输入字段和按钮。这可以通过直接为这些元素分配唯一的 ID 或通过引用它们在 ASP 中生成的客户端 ID 来完成。
  2. 添加 JavaScript 来处理按键事件：使用 JavaScript 监听输入字段上的按键事件。您将检查按下的键是否为 Enter（键代码 13），然后触发相应的按钮单击。
  3. 将 JavaScript 注入您的 ASP 页面：您可以将 JavaScript 直接放入您的 ASP 页面或将其作为外部脚本包含在内。

这是一个示例实现：

<%@ Language="VBScript" %>
    <html>
    <head>
        <title>Upload / Download Login</title>
        <script type="text/javascript">
            // Function to handle Enter key press
            function handleEnterKey(event, buttonId) {
                if (event.keyCode === 13) { // 13 is the Enter key
                    event.preventDefault(); // Prevent the default form submission
                    document.getElementById(buttonId).click(); // Trigger the button click
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <!-- Upload Login Control -->
            <div id="uploadLogin">
                <asp:TextBox ID="txtUsernameUpload" runat="server" ClientIDMode="Static" onkeydown="handleEnterKey(event, 'btnLoginUpload')" />
                <asp:TextBox ID="txtPasswordUpload" runat="server" TextMode="Password" ClientIDMode="Static" onkeydown="handleEnterKey(event, 'btnLoginUpload')" />
                <asp:Button ID="btnLoginUpload" runat="server" Text="Login" OnClick="UploadLogin_Click" ClientIDMode="Static" />
            </div>

            <!-- Download Login Control -->
            <div id="downloadLogin">
                <asp:TextBox ID="txtUsernameDownload" runat="server" ClientIDMode="Static" onkeydown="handleEnterKey(event, 'btnLoginDownload')" />
                <asp:TextBox ID="txtPasswordDownload" runat="server" TextMode="Password" ClientIDMode="Static" onkeydown="handleEnterKey(event, 'btnLoginDownload')" />
                <asp:Button ID="btnLoginDownload" runat="server" Text="Login" OnClick="DownloadLogin_Click" ClientIDMode="Static" />
            </div>
        </form>
    </body>
    </html>

说明：

  • ClientIDMode="Static"：此属性确保控件具有可以在 JavaScript 中引用的一致 ID。如果您以不同方式处理 ID，则可以将其删除。
  • onkeydown 事件：每个输入字段都会监听 keydown 事件。如果检测到 Enter 键 (keyCode === 13)，则会调用 JavaScript 函数 handleEnterKey，并将相应的按钮 ID 作为参数传递。
  • handleEnterKey 功能：该函数检查按下的键是否为Enter。如果为 true，它将阻止默认行为（可能会提交表单）并触发指定按钮上的单击事件。

#重要注意事项：

  • 确保 JavaScript 中使用的 ID（btnLoginUpload 和 btnLoginDownload）与客户端按钮的呈现 ID 匹配。使用 ClientIDMode="Static" 通过保持 ID 一致来简化此操作。
  • 该解决方案采用简单的表单结构。如果您的 ASP.NET 页面具有更复杂的控件或母版页，您可能需要调整 JavaScript 中的定位元素的方式。
  • 如果您需要支持更复杂的场景或其他浏览器，请考虑使用 event.which 或 event.key 以获得更好的按键检测。

通过此设置，在关注特定登录控件中的任何字段时按 Enter 键应该正确触发关联的登录按钮。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.