0

我有一个使用 ui:include 的主登录页面包含的模式。我能够确认 ui:include 部分没有导致我遇到的问题。

在模态上，我有三个 JSF 元素；两个 inputSecrets (myFaces) 和一个 CommandLink (myFaces) 用于提交按钮。这是代码片段：

<div style="padding: 0px 20px 5px 140px; width: 300px; text-align: left; font-size: 12px; font-family: Verdana, Geneva, sans-serif; font-weight: 600;">
        New Password:<br/>
        <t:inputSecret forceId="true" id="pwOne" title="New Password" size="27"  maxlength="20"
                       value="#{accountSettingsBean.newPassword}"
                       tabindex="72" />
        <br/><br/>
        Confirm Password:<br/>
        <t:inputSecret forceId="true" id="pwTwo" title="Confirm Password" size="27"  maxlength="20"
                       value="#{accountSettingsBean.confirmNewPassword}"
                       tabindex="73"/>
    </div>

    <div id="submitButton" style="width: 420px; align: left;">
        <t:commandLink value="SUBMIT"
                       style="color:white; text-decoration:none; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); background: #4775AD; background: -moz-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5b93d8), color-stop(100%, #4775AD)); background: -webkit-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: -o-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: -ms-linear-gradient(top, #5b93d8 0%, #4775AD 100%); background: linear-gradient(to bottom, #5b93d8 0%, #4775AD 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b93d8', endColorstr='#4775AD', GradientType=0 ); border: 1px solid #848484; padding: 0px 5px;white-space: nowrap;font-size: 14px !important;text-align: center; line-height: 40px;font-weight: bold;-webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px;-webkit-border-bottom-right-radius: 10px; border-radius: 10px 10px 10px 10px; width: 150px; height: 40px; margin-left: -20px; margin-top: 15px; margin-bottom: 10px; display: block;"
                       action="#{accountSettingsBean.updateExpiredPassword}"
                       id="lnkUpdateExpiredPw"
                       binding="#{accountSettingsBean.lnkUpdateExpiredPw}"
                       tabindex="74" />

在通过开发工具提供的每个 IE 版本中，选项卡都无法正常工作。在 IE9 中，当看到模态框时，第一次按 Tab 似乎将焦点返回给主页，而第二次按 Tab 则将焦点返回给第二个 inputSecret。在 IE8 中，选项卡适用于“密码”和“确认密码”字段，但我永远无法切换到提交按钮。我无法在任何版本的 IE 中切换到提交按钮。此外，点击“返回”会点击包含我的模式的主页上的提交按钮，而不是关注 IE 表示它关注的任何字段。

我尝试过的一件事是将“onkeydown”事件链接到 javascript 函数以手动将焦点放在我想要的字段上。我还不能让它工作，但我想找到问题的真正根源，为什么它不能在 IE 中工作。

4

1 回答 1

0

这是一个 hack，但我能够通过在三个不同的元素中嵌套 inputtext 字段来解决 IE 中的这个问题，如下所示：

<t:inputSecret forceId="true" id="newPasswordOne" title="New Password" size="27"  maxlength="20"
                       value="#{accountSettingsBean.newPassword}">
        <t:inputText tabindex="25" size="1" disabled="true" style="display: none" />
        </t:inputSecret>

它没有破坏 Firefox 或 chrome。我不确定为什么这会起作用，但确实如此。

于 2013-08-26T18:06:30.193 回答