0

ページは複数のセクションを持つフォームで構成できるという要件があります。セクションを追加または削除できます。ユーザーがセクションの追加を選択すると、フォームが送信され、新しいセクションが追加された新しいページが返されます。ブラウザーは、新しいセクションの上部までスクロールする必要があります。これは問題なく、一般的なjqueryの「アンカーへのスクロール」ソリューションが機能しています。ただし、単純に を設定するだけでなくwindow.location()、キーボード ユーザーがタブを押すとアンカー ポイントの次のフィールドに移動できるようにする必要もあります。これを行うために、この質問の解決策を使用しています。

これは IE 8/9 では正常に動作しますが、firefox(15) では、アンカー タグがある場所に小さなフォーカス スクエアが表示されます。これを抑制したいので、設定してみdisplay:noneましたが、もちろんスクロールが止まります。私はフィドルを作成しようとしましたが、jsFiddle は fddle サイト自体がフォーカス設定に干渉しているため、問題を示していませんが、ローカルで実行されている同じブラウザーの同じコードはそうです。

これは、問題を示す私のコードの縮小版です。

<html>
  <head>
     <title>test scroll</title>
  </head>
  <body>
        <form>
            <div>Blah</div>
            <div>
            <label for="a">Section 1: <input id="a" type="text" /></label>
        </div>
        <a id="scrollToAnchorSection2"></a>
        <div>
            <label for="b">Section 2: <input id="b" type="text" /></label>
        </div>
    </form>
</body>
</html>

そして私のjquery

$(document).ready(function() {
     /* Find any "scroll to anchors" that have been set */
    var anchors = $('[id*=scrollToAnchor]:first');
    if (anchors.length == 1) {
        window.location = "#" + anchors.attr("id");

        // Set tab position
        anchors.attr("tabindex", -1).focus();

    }
});

とcss

div {
    margin-left:5em;
}
4

1 に答える 1

1

リクエスト通り...

Blur 関数は入力の失われたフォーカスを処理します。

$('input').blur(function (){...})?これはあなたが必要とするものではありませんか？

jquery のドキュメントには、この興味深いコメントがあります。

「ぼかしイベントは、要素がフォーカスを失ったときに送信されます。もともと、このイベントは などのフォーム要素にのみ適用されました。最近のブラウザでは、イベントのドメインが拡張され、すべての要素タイプが含まれるようになりました。」

于 2012-09-04T12:53:48.240 に答える