0

ui:include を使用して、メインのログイン ページにモーダルを格納しています。ui:include 部分が問題の原因ではないことを確認できました。

モーダルには、3 つの JSF 要素があります。送信ボタン用の 2 つの inputSecret (myFaces) と 1 つの 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 では、最初にタブを押すと、モーダルが表示されたときにメイン ページにフォーカスが戻るように見え、2 回目にタブを押すと、2 番目の inputSecret にフォーカスが移ります。IE8 では、タブは「パスワード」および「パスワードの確認」フィールドで機能しますが、タブで送信ボタンに移動することはできません。どのバージョンの IE でも送信ボタンにタブで移動できません。また、「戻る」を押すと、IEがフォーカスしていると言っているフィールドにフォーカスするのではなく、モーダルを収容するメインページの送信ボタンにヒットします。

私が試したことの 1 つは、javascript 関数にリンクする「onkeydown」イベントを配置して、必要なフィールドに手動でフォーカスを当てることです。私はまだこれを機能させることができませんでしたが、IE で機能しない理由について、問題の実際の根本を突き止めたいと思います。

4

1 に答える 1