1

フォーカスが textarea に「同時に」移動する場所を決定する方法に関して、ここにはいくつかの良い質問がありますonblur。

しかし、どのアンカータグがクリックされてテキストエリアが起動したかonblur、setTimeoutまたはクリックされなかったかを判断するための適切なクロスブラウザの方法が見つかりませんでした。 document.activeElement有望に見えましたが、一見逆のように見える回答は、 なしsetTimeoutでactiveElementは信頼できません。一部のブラウザでは、 がbody返され続けます。activeElement

例: jsFiddle-ige #1 :

HTML

<form>
    <input onblur="blurHandler();" type="text" id="spam1" 
        value="immediate blur check">
    <input onblur="blurHandlerTimeout();" type="text" id="spam2" 
        value="delayed blur check"> 
    <a href="#" id="spam3">X</a>
    <br>
</form>
<br>
<hr>
<br>
<div id="logs"></div>

JavaScript

var logs = document.getElementById('logs');

function blurHandler() {
    logit(document.activeElement.outerHTML.substr(0, 80));
}

function blurHandlerTimeout() {
    setTimeout(function () {
        logit(document.activeElement.outerHTML.substr(0, 80));
    }, 10);
}

function logit(msg) {
    try {
        var e = document.createTextNode(msg), // probably a better way, but this does allow html as text
            f = document.createElement('div');

        logs.insertBefore(e, logs.firstChild);
        logs.insertBefore(f, logs.firstChild);
    } catch (err) {
        alert(err);
    }
}

即時ぼかしチェック テキストボックスからのぼかしの body 要素は、次の場合に毎回発生します。

  • Safari 5.1.7 (アンカー、タブ、クリックにまったく集中できません)
  • Firefox 18.0.1
  • クロム 24.0.1312.56 m、

遅延ぼかしチェックボックスにフォーカスを設定し、アンカーをクリック/タブすると、次のようになります。

  • Chrome:アンカーをクリックした場合の本文
  • Chrome:タブで移動した場合のアンカー
  • Safari:体はどっちでもいい
  • Firefox:何があってもアンカー

IE8は、各テキストボックス、遅延ハンドラー、またはいいえのたびにアンカーを提供します。

確かに、共有スコープ レベル (たとえば、グローバル) でアンカーにブール値を設定し、アンカーが [最近] フォーカスを取得したかどうかを確認するブール値クエリから setTimeout を取得する方法がありますが、それはずるい。

そうは言っても、私はそれをやりました、与えるか取るか、ここで:

これを行うより良い方法はありますか？jQuery は問題ないと思いますが、私はクリーンな JavaScript ソリューションを好みます。つまり、複雑な JavaScript 修正よりもクリーンな jQuery ソリューションの方が優れているということです。

4

1 に答える 1

1

アンカータグに属性document.activeElementを指定している限り、の遅延チェックはすべてのブラウザで機能します。、デフォルトではタブの順序がないため、その属性なしでまったく「フォーカス」できるブラウザは誤動作していると思います。tabindexaa

HTML5仕様によると：

tabindex content属性を使用すると、作成者は、要素がフォーカス可能であるかどうか、シーケンシャルフォーカスナビゲーションを使用して到達可能であるかどうか、およびシーケンシャルフォーカスナビゲーションの目的で要素の相対的な順序を制御できます。

（エンファシスマイン）

<form>
    <input onblur="blurHandler();" type="text" id="spam1" 
        value="immediate blur check">
    <input onblur="blurHandlerTimeout();" type="text" id="spam2" 
        value="delayed blur check"> 
    <a href="#" id="spam3" tabindex='1'>X</a>
    <br>
</form>
<br>
<hr>
<br>
<div id="logs"></div>

更新されたフィドル：http： //jsfiddle.net/Y5kcp/4/

IE8 / 9、FF 18.0.1、Chrome 24.0.1312.56 m、Safari5.17でテスト済み

これは純粋な推測ですが、のHTML4仕様でtabindexは「フォーカス可能性」が機能として言及されていないため、IEは適切に動作していた可能性があります。

この属性は、現在のドキュメントのタブ順序での現在の要素の位置を指定します。

その場合、HTML 4仕様に準拠しているブラウザーは、tabindex属性の有無にかかわらずアンカータグをフォーカス可能にすることができます。

document.activeElementこれが独自のIE4機能であったことも注目に値します（のMDN記事に関する注記document.activeElementを参照）。たぶんそれがInternetExplorerのタイムアウトなしで機能する理由です。

于 2013-02-01T20:42:08.953 に答える