7

次の例では、アラートボックスが1つだけ表示されます。JavaScriptコードが実行される前にフォーカスが置かれていることを読みました。これを機能させる方法はありますか？

<input id="i" type="text" autofocus onfocus="alert(1)">

<script type="text/javascript">
document.getElementById('i').addEventListener('focus', function() {
    alert(2);
}, false);
</script>

（私はこれをSafariでのみテストしました）

編集：私は明らかにこの方法でそれを行うことができます（Prototypejsセレクター）：

var autofocusElement = $$('input[autofocus]')[0];
callListener(autofocusElement);

ただし、イベントリスナーを追加するだけの場合と比べると見苦しいです。

編集：

オートフォーカス属性に対するブラウザのサポートがないことを心配する必要はありません。以下のリンクをいじるのと同じように、簡単に解決できました。私が見ることができるように、問題に対する最良の解決策もあります。私の質問は、リスナーを手動で呼び出すよりも醜いものでそれを行うことができるかどうかです。

http://jsfiddle.net/tellnes/7TMBJ/3/

Firefoxはオートフォーカスをサポートしていないため、Firefox3.6では正常に動作します。しかし、オートフォーカスをサポートするSafariでは、呼び出されるイベントではありません。

4

5 に答える 5

5

HTML5ワーキングドラフトから：

autofocus指定された属性を持つドキュメント内に複数の要素があってはなりません 。

とにかく、未定義の動作を求めています。

要素が1 つしかないautofocus場合、Firefox 3.6 では、ページの読み込み時にどちらのハンドラーも呼び出されません。要素に手動でフォーカスを与えると、両方のハンドラーが呼び出されます (アラート ボックスを閉じるときに要素にフォーカスが戻るため、無限ループに進みます)。

HTML5 ドラフトでは、イベントの発生など、ページの読み込み時に焦点を絞る手順autofocusを実行する必要があると述べていますが、現在、ブラウザーがその機能を完全または一貫した方法で実装していない可能性があります。focus

focusHTML5 仕様が完成し、ブラウザーが完全なサポートを目指し始めるまで、ページの読み込み中にイベント ハンドラーを明示的に呼び出すことをお勧めします。

于 2010-12-05T19:01:33.003 に答える
0

現在の例からの次のコード:

<input id="i" type="text" autofocus onfocus="alert(1)">

<script type="text/javascript">
    document.getElementById('i').addEventListener('focus', function() {
        alert(2);
    }, false);
</script>

1からへのアラートの無限ループを引き起こします2

[同]

理由: (これは をサポートするブラウザでのみ発生しますautofocus)

入力がオートフォーカスを取得し、アラートを発生させるイベントを発生させ、アラートがフォーカスを取得し、[OK] をクリックすると、入力がフォーカスを取得し、フォーカス イベントが新しいイベントを発生させて、2 つの異なるアラートをトリガーします (DOM が完全にロードされたため、新しいイベントが別のアラートで追加されます)、両方のアラートが取得されますフォーカス、[OK] をクリック、[OK] をクリック、入力がフォーカスを取得すると新しいイベントがトリガーされ、2 つの異なるアラートがトリガーされます。アラートがフォーカスを取得し、[OK] をクリックします。次のアラートがフォーカスを取得します。次のアラートでフォーカスを取得、[OK] をクリック、入力でフォーカスを取得、両方のイベントを起動、アラートでフォーカスを取得、[OK] をクリック、次のアラートでフォーカスを取得、[OK] をクリック、入力でフォーカスを取得、両方のイベントを発行、アラートでフォーカスを取得、[OK] をクリック、次のアラートでフォーカスを取得、[OK] をクリック、入力がフォーカスを取得、両方のイベントを起動、入力がフォーカスを取得、両方のイベントを起動、アラートがフォーカスを取得、[OK] をクリック、次のアラートがフォーカスを取得、[OK] をクリック、入力がフォーカスを取得、両方のイベントを起動、入力がフォーカスを取得、両方のイベントを起動、アラートがフォーカスを取得、OK をクリック、次のアラートがフォーカスを取得、OK をクリック、入力がフォーカスを取得、両方のイベントを起動、入力がフォーカスを取得、両方のイベントを起動、アラートがフォーカスを取得、[OK] をクリックすると、次のアラートがフォーカスを取得し、[OK] をクリックすると、入力がフォーカスを取得し、両方のイベントが発生します...

無限プロセスのテキスト記述 FTW!....? :P

[/編集]

2 つのオート フォーカスが適用された前の例では、一番下に添付した例のように、最後のオート フォーカスが実行されるようです。クラス名に基づいて各入力にフォーカス イベントを追加する方法も追加しました...探しているかどうかはわかりませんが、役立つかもしれません。

JSFiddle onfocus イベントの例

于 2010-12-05T19:24:56.233 に答える
0

オートフォーカスに値を与える必要があります。
<input id="i" type="text" onfocus="alert(1)" autofocus="">

于 2018-01-30T09:44:21.527 に答える
-1

onfocusいずれかの JavaScript コードを実行する必要がある場合はinput、jQuery を使用できます: http://api.jquery.com/focus/

于 2010-12-05T19:08:51.097 に答える