Question

我正在使用asp.net向导模板，我有一个要求，例如当用户按 Enter 按钮时，它将与下一个按钮相同，我可以通过在面板中使用defaultbutton来管理其他一些表单。但是这种情况是一个向导，并且在运行时创建了按钮，因此我尝试使用jquery实现，但它仍然不像用户按时那样工作输入按钮后退按钮被触发，所以我的问题是如何将此行为更改为后退按钮的下一个按钮。

<CustomNavigationTemplate>
                            <table border="0" cellspacing="5" cellpadding="5"  >
                            <tr align="right">
                            <td align="right" colspan="0">
                            <asp:Button ID="StepPrevButton" runat="server" data-button="true"  UseSubmitBehavior="False"  CommandName="MovePrevious" Text="Back" />
                            </td> 
                            <td align="right" >
                                <asp:Button ID="StepNextButton" runat="server"  data-button="true" style= "width:120px"   
                                                CommandName="MoveNext" Text="Request User"
                                                ValidationGroup="CreateUserWizard1" />                              
                            </td>
                            </tr>
                            </table>
                        </CustomNavigationTemplate>

这是填充按钮的方式

$(document).keyup(function (e) {
        if (e.which == 13) {
            if ($('#ctl00_MainContent_CreateUserWizard1_StartNavigationTemplateContainerID_StartNextButton').length > 0) {
                $("#ctl00_MainContent_CreateUserWizard1_StartNavigationTemplateContainerID_StartNextButton").trigger('click');
            }
            else if ($('#ctl00_MainContent_CreateUserWizard1_StepNavigationTemplateContainerID_StepNextButton').length > 0) {
                $("#ctl00_MainContent_CreateUserWizard1_StepNavigationTemplateContainerID_StepNextButton").trigger('click');
            }
            else if ($('#ctl00_MainContent_CreateUserWizard1___CustomNav2_StepNextButton').length > 0) {
                $("#ctl00_MainContent_CreateUserWizard1___CustomNav2_StepNextButton").trigger('click');
            }
        }
    });

我的向导中有3个页面

由于亚历

Answer 1

如果没有一些代码，这很难回答，大多数前端都是完全不同的。

现在假设您正在使用标准<asp:Wizard />控件。此控件可以使用CssClass属性为表单上显示的三个不同按钮设置css类。

当按下 Enter 键时，实现向前移动向导的逻辑的计划将使用jQuery类选择器和triggers模拟鼠标点击{ {1}}，Start和Next按钮。

首先，我们首先将一个公共Finish附加到我们想要附加css class个事件的每个按钮类型。我们感兴趣的属性是

jQuery - ＆gt;设置向导控件中StartNext按钮的样式。
StartNextButtonStyle - ＆gt;标准StepNextButtonStyle按钮，用于在向导的中间阶段进行向前导航。
StepNext - ＆gt;最后，这是最后出现的完成按钮。

以下是基本向导控件的示例，其中包含常见的css类FinishCompleteButtonStyle。 请注意，此类不需要存在于任何css文件中，因为它仅用作（在本例中）作为jQuery选择器。

wizard-step-button

您会注意到，每个属性的属性<asp:Wizard ID="wizard1" runat="server"> <StartNextButtonStyle CssClass="wizard-step-btn" /> <StepNextButtonStyle CssClass="wizard-step-btn" /> <FinishCompleteButtonStyle CssClass="wizard-step-btn" /> </asp:Wizard>都设置为CssClass。

现在，有趣的部分是连接jQuery，以便在按 Enter 键时触发wizard-step-button按钮单击。

这是jQuery代码片段。（请阅读以下说明）。

Next

在上面的代码片段中，jQuery load事件被触发（在每个$(function () { $(document).keyup(function (e) { if (e.keyCode == 13) { $('.wizard-step-btn:first').trigger('click'); e.preventDefault(); return false; } }); }); [讨厌该术语]）并附加到PostBack对象上的keyup。这使您可以在文档（页面）的任何位置按Enter键以触发事件。

现在语句document检查以确保您按下 Enter 而不是任何其他键。最后声明

e.keyCode == 13

将找到包含css类$('.wizard-step-btn:first').trigger('click');的第一个按钮，并将触发该按钮的wizard-step-btn事件。

这实际上将执行您的前向向导。

希望这有帮助。

更新：

在您发布自定义导航模板的代码后，只需添加css即可 click等级wizard-step-btn，例如所有下一个按钮。

StepNextButton

按键输入

1 个答案: