Question

我有一个包含3个文本框和1个radiobuttonlist的ASP.Net页面。 4个控件中的每一个都有

lapply

在其定义中。这是完整的标记：

class="tabbable"

文本框txtclnum调用页面底部的javascript函数MoveNext（只是为了确保所有内容以正确的顺序加载）（这取自the first answer to this question）。 MoveNext中有一个警告，告诉我tabbables.length是什么。警报返回0，因为.Net控件中的CssClass会覆盖class =＆＃34; tabbable＆＃34;在HTML中。我试过了

<%@ Control Language="c#" AutoEventWireup="false" Codebehind="approvalacctprocess.ascx.cs" Inherits="cmc.workflow.ui.ApprovalAcctProcess" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Register tagprefix="CMC" Tagname="ApprovalComments" src="~/workflow\ui\ApprovalComments.ascx" %>
<script src="../../Scripts/jquery-1.4.1.js"></script>
<asp:Panel ID="pnlApprovalAC" CssClass="STDPANEL" HorizontalAlign="Center" Runat="server" Width="550">
    <TABLE cols="2" width="520">
        <TR>
            <TD class="FLDLABEL" style="VERTICAL-ALIGN: top">Client Number</TD>
            <TD>
                <asp:TextBox id=txtclnum style="VERTICAL-ALIGN: top" Width="300" Runat="server" CssClass="FLDVALUE" TabIndex="0" onchange="MoveNext(this);" Text='<%# Property["clnum"] %>' MaxLength="14" AutoPostBack="True" class="tabbable"></asp:TextBox>&nbsp;
                <asp:RegularExpressionValidator id="rxClNum" ValidationExpression="^[0-9]+[&#9;]*$|Clt Number TBD" ErrorMessage="Client Number consists of up to 14 numbers"
                    ControlToValidate="txtclnum" runat="Server"></asp:RegularExpressionValidator></TD>
        <TR>
            <TD class="FLDLABEL" style="VERTICAL-ALIGN: top">Matter Number (5-6 digit)</TD>
            <TD>
                <asp:Label id=lbclnum style="TEXT-ALIGN: right" Width="140" Runat="server" Text='<%# Property["clnum"] %>' Font-Name="verdana" Font-Size="x-small">
                </asp:Label>-
                <asp:TextBox id=txtmmatter Width="150" Runat="server" CssClass="FLDVALUE" TabIndex="1" Text='<%# Property["mmatter"] %>' MaxLength="6" AutoPostBack="True" class="tabbable"></asp:TextBox>&nbsp;
            </TD>
        <TR>
            <TD colSpan="2">
                <HR style="COLOR: gray; TEXT-ALIGN: left" SIZE="1">
            </TD>
        </TR>
        <tr>
            <td class="FLDLABEL" style="VERTICAL-ALIGN: top" width="500" colspan="2"><asp:Label runat="server" ID="lbExistingClientQuestion" Text="Is there an Engagement Letter on file for this client?" Visible="false" />&nbsp;&nbsp;
        <asp:Label runat="server" ID="lbUDFRetainerLetter" Text='<%# Property["RetainerLetter"] %>' Visible="false" /></td>
        </tr>
        <TR>
            <TD class="FLDLABEL" style="VERTICAL-ALIGN: top" width="500" colSpan="2">Has a
                retainer/engagement letter been submitted and approved by Charlotte Fischman?</TD>
        </TR>
        <TR>
            <TD colSpan="2">
                <asp:RadioButtonList id="rblRetLtrReturned" TabIndex="2" Runat="server" CssClass="RADIOBUTTONLIST" RepeatDirection="Horizontal" class="tabbable"
                    RepeatLayout="Table" RepeatColumns="1" width="300" AutoPostBack="True">
                    <asp:ListItem Value="0">No</asp:ListItem>
                    <asp:ListItem Value="1">Yes</asp:ListItem>
                </asp:RadioButtonList>
                <asp:Label id="lblnoretainerltrneeded" Runat="server" CssClass="SMALLNOTE" Text="(This is an existing client and the matter is in an existing area of law.&#13;&#10;&#9;&#9;&#9;&#9;&nbsp;&nbsp; A retainer letter may not be needed.)"
                    Font-Size="xx-small" Visible="False" ForeColor="red"></asp:Label></TD>
        </TR>
        <TR>
            <TD colSpan="2">
            </TD>
        </TR>
        <TR>
            <td class="FLDLABEL" style="VERTICAL-ALIGN: top" colSpan="2" width="500">Reason for Not Submitting an Retainer/Engagement Letter for Approval<SPAN style="FONT-WEIGHT: bold; COLOR: red">
                                *</SPAN>&nbsp;
            <asp:Label runat="server" CssClass="SMALLNOTE" Text="(Required if no retainer letter submitted and not an existing client)" Font-Size="XX-Small" ForeColor="Red" /></td>
        </TR>
        <TR>
            <td colspan="2">
                <asp:TextBox Width="500" runat="server" TextMode="MultiLine" TabIndex="3" CssClass="FLDVALUE" ID="txtReason" MaxLength="500" Text='<%# Property["Reason"] %>' AutoPostBack="True" class="tabbable" />

            </td>
        </TR>
        <TR>
            <TD colSpan="2">
                <HR style="COLOR: gray; TEXT-ALIGN: left" SIZE="1">
            </TD>
        </TR>
        <TR>
            <TD class="FLDLABEL" style="VERTICAL-ALIGN: top">Comments</TD>
            <TD>
                <asp:TextBox id="txtComments" style="VERTICAL-ALIGN: top" Width="300" TabIndex="4" Runat="server" CssClass="FLDVALUE"
                    MaxLength="450" Rows="5" TextMode="MultiLine" Text='<%# Property["AcctgComment"] %>' AutoPostBack="True" class="tabbable"></asp:TextBox></TD>
        </TR>
    </TABLE>
    <TABLE class="STDPANEL" style="VERTICAL-ALIGN: middle" height="50" width="550">
        <TR>
            <td align="center">
                <input id="btnSaveACProperty" runat="server" name="btnSaveACProperty" 
                    onserverclick="OnSave_Click" type="submit" value="Save Status and Comment">
                    &nbsp;&nbsp;
                    <input id="btnResetACProperty" runat="server" name="btnResetACProperty" 
                        type="reset" value="Cancel">
                    </input>
                </input>
            </td>
        <tr>
            <td align="left">
                <asp:ValidationSummary ID="valsum" runat="server" BorderColor="" 
                    BorderStyle="Solid" BorderWidth="2" CssClass="VALIDATORSUM" DisplayMode="List" 
                    Font-Bold="True" ForeColor="red" 
                    HeaderText="  Some errors occurred in your input.  Please correct them:&lt;br&gt; " 
                    ShowMessageBox="True" ShowSummary="True" Width="500" />
            </td>
        </tr>
    </TABLE>
</asp:Panel>
<script type="text/vbscript">

</script>
<script type="text/javascript" lang="javascript">
    function MoveNext(ele) {
        $(document).ready(function () {
            var lastTabIndex = 4;
            var currentElementID = ele.id; // ID set by OnFocusIn
            var currentElement = document.getElementById(currentElementID);
            var curIndex = currentElement.tabIndex; //get current elements tab index
            if (curIndex == lastTabIndex) { //if we are on the last tabindex, go back to the beginning
                curIndex = 0;
            }
            var tabbables = document.querySelectorAll("tabbable"); //get all tabbable elements
            alert(tabbables.length);
            for (var i = 0; i < tabbables.length; i++) { //loop through each element
                if (tabbables[i].tabIndex == (curIndex + 1)) { //check the tabindex to see if it's the element we want
                    tabbables[i].focus(); //if it's the one we want, focus it and exit the loop
                    break;
                }
            }
        });
    }
</script>

这让我得到了正确的控制，但焦点并没有停留在那个控制上。如何将注意力集中在控制上？

Answer 1

该函数将CSS选择器作为其参数，因此，如果您要查找具有“tabbable”类的元素，则可以使用document.querySelectorAll(".tabbable")

Answer 2

由于tabbable是一个类，你需要在queryselector中放一个句点，所以它应该是：

<tabbable>

编辑：进一步说明，queryselector没有“。”会寻找像public void setRates(double lr, double hr){ lowRate=lr; highRate=hr; }这样的html标签。由于不存在，返回的长度为0。

Answer 3

您使用它的方式，onCheckedChanged()正在寻找标记document.querySelectorAll("tabbable")的元素。由于看起来您正在尝试按类查询，因此请添加句点以表示它是这样的。

<tabbable>

使用document.querySelectorAll(".tabbable")时它可以正常工作，所以如果您过去使用过该方法，我可以看到您可能会感到困惑。

Answer 4

好吧，我觉得自己像个白痴。只是为了别人＆＃39;未来的参考，问题是1）有一个Cssclass分配给那些控件，它覆盖HTML标记中的tabbable类; 2）一旦我处理了它（见下面的代码），它仍然没有工作，因为（duh）每个控件都有一个AutoPostBack = true（它们曾经附加了服务器端代码）。既然AutoPostBack是假的，我的代码工作正常。这是：

<script type="text/javascript" lang="javascript">
function MoveNext(currentElement, btnID) {
    $(document).ready(function () {
        var saveButton = document.getElementById(btnID);
        saveButton.disabled = false;
        var lastTabIndex = 4;
        var curIndex = currentElement.tabIndex; //get current elements tab index
        if (curIndex == lastTabIndex) { //if we are on the last tabindex, go back to the beginning
            curIndex = 0;
        }
        var tabbables = document.getElementsByTagName("*"); //get all tabbable elements
        for (var i = 0; i < tabbables.length; i++) { //loop through each element
            if (tabbables[i].tabIndex != null & tabbables[i].tabIndex == (curIndex + 1)) { //check the tabindex to see if it's the element we want
                tabbables[i].focus(); //if it's the one we want, focus it and exit the loop
                break;
            }
        }
    });
}

感谢大家的帮助。

querySelectorAll返回空节点列表

4 个答案: