javascript - 「ぼかし」イベントが発生した場合、どの要素のフォーカスが to に移動したかを調べるにはどうすればよいですか?

Question

blur次のように HTML 入力ボックスに関数を追加するとします。

<input id="myInput" onblur="function() { ... }"></input>

blur関数内でイベントを発生させた要素 (クリックされた要素) の ID を取得する方法はありますか? どのように？

たとえば、次のようなスパンがあるとします。

<span id="mySpan">Hello World</span>

入力要素がフォーカスされた直後にスパンをクリックすると、入力要素はフォーカスを失います。mySpan関数は、クリックされたことをどのように認識しますか?

PS: 入力要素の onblur イベントの前にスパンの onclick イベントが発生した場合、特定の要素がクリックされたことを示すステータス値を設定できるため、問題は解決します。

PPS: この問題の背景はblur、入力要素のイベントのために提案がすぐに消えることなく、AJAX オートコンプリートコントロールを外部 (クリック可能な要素から) トリガーして提案を表示したいことです。blurそのため、特定の要素がクリックされたかどうかを関数にチェックインし、クリックされた場合はぼかしイベントを無視したいと考えています。

score 96 · Accepted Answer

2015 回答: UI Events relatedTargetによると、イベントのプロパティを使用できます。

EventTargetイベントの種類に応じて、Focus イベントに関連するセカンダリを識別するために使用されます。

blurイベントについては、

relatedTarget:フォーカスを受け取るイベントターゲット。

例：

function blurListener(event) {
  event.target.className = 'blurred';
  if(event.relatedTarget)
    event.relatedTarget.className = 'focused';
}
[].forEach.call(document.querySelectorAll('input'), function(el) {
  el.addEventListener('blur', blurListener, false);
});

.blurred { background: orange }
.focused { background: lime }

<p>Blurred elements will become orange.</p>
<p>Focused elements should become lime.</p>
<input /><input /><input />

注 Firefox はrelatedTargetバージョン 48 までサポートされません (バグ 962251、MDN )。

score 94 · Accepted Answer

explicitOriginalTargetうーん... Firefoxでは、クリックされた要素をプルするために使用できます。IE でも同じことを期待toElementしていましたが、うまくいかないようです...ただし、新しくフォーカスされた要素をドキュメントから取得できます。

function showBlur(ev)
{
   var target = ev.explicitOriginalTarget||document.activeElement;
   document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
}

...

<button id="btn1" onblur="showBlur(event)">Button 1</button>
<button id="btn2" onblur="showBlur(event)">Button 2</button>
<button id="btn3" onblur="showBlur(event)">Button 3</button>
<input id="focused" type="text" disabled="disabled" />

警告:この手法は、キーボードでフィールドをタブ移動することによるフォーカスの変更には機能しません。また、Chrome または Safari ではまったく機能しません。(IE を除く)を使用する際の大きな問題は、イベントが処理されるまで一貫して更新されず、処理中に有効な値がまったくない可能性があることです! これは、Michiel が最終的に使用したテクニックのバリエーションで軽減できます。activeElementblur

function showBlur(ev)
{
  // Use timeout to delay examination of activeElement until after blur/focus 
  // events have been processed.
  setTimeout(function()
  {
    var target = document.activeElement;
    document.getElementById("focused").value = 
      target ? target.id||target.tagName||target : '';
  }, 1);
}

これは、ほとんどの最新のブラウザー (Chrome、IE、および Firefox でテスト済み) で動作するはずですが、Chrome はクリックされた(タブで移動した)ボタンにフォーカスを設定しないことに注意してください。

score 20 · Accepted Answer

私は最終的にonblurイベントのタイムアウトで解決しました（StackOverflowではない友人のアドバイスのおかげです）：

<input id="myInput" onblur="setTimeout(function() {alert(clickSrc);},200);"></input>
<span onclick="clickSrc='mySpan';" id="mySpan">Hello World</span>

FF と IE の両方で動作します。

score 17 · Accepted Answer

ぼかしの代わりにドキュメントの mousedown イベントを使用することが可能です:

$(document).mousedown(function(){
  if ($(event.target).attr("id") == "mySpan") {
    // some process
  }
});

score 10 · Accepted Answer

type のインスタンスにFocusEventはrelatedTargetプロパティがありますが、FF のバージョン 47 まで、具体的には、この属性はを返します。48null以降では、既に機能しています。

詳細はこちらでご覧いただけます。

score 2 · Accepted Answer

何をいつチェックしているのかを元に戻すことはできますか? 最後にぼやけたものを覚えている場合は、次のようになります。

<input id="myInput" onblur="lastBlurred=this;"></input>

次に、スパンの onClick で、両方のオブジェクトで function() を呼び出します。

<span id="mySpan" onClick="function(lastBlurred, this);">Hello World</span>

関数は、Ajax.AutoCompleter コントロールをトリガーするかどうかを決定できます。関数には、クリックされたオブジェクトとぼやけたオブジェクトがあります。onBlur は既に発生しているため、提案が消えることはありません。

score 2 · Accepted Answer

また、特定の要素がクリックされて機能する解決策がある場合、Autocompleter がぼかしを無視するようにしようとしていますが、explicitOriginalTarget による Firefox のみの場合です。

Autocompleter.Base.prototype.onBlur = Autocompleter.Base.prototype.onBlur.wrap( 
        function(origfunc, ev) {
            if ($(this.options.ignoreBlurEventElement)) {
                var newTargetElement = (ev.explicitOriginalTarget.nodeType == 3 ? ev.explicitOriginalTarget.parentNode : ev.explicitOriginalTarget);
                if (!newTargetElement.descendantOf($(this.options.ignoreBlurEventElement))) {
                    return origfunc(ev);
                }
            }
        }
    );

このコードは、Autocompleter のデフォルトの onBlur メソッドをラップし、ignoreBlurEventElement パラメーターが設定されているかどうかを確認します。設定されている場合、クリックされた要素が ignoreBlurEventElement であるかどうかを毎回チェックします。そうである場合、Autocompleter は onBlur を調整せず、そうでない場合は onBlur を呼び出します。これに関する唯一の問題は、explicitOriginalTarget プロパティが Mozilla 固有であるため、Firefox でのみ機能することです。今、explicitOriginalTarget を使用するよりも別の方法を見つけようとしています。あなたが言及した解決策では、 onclick 動作を要素に手動で追加する必要があります。explicitOriginalTarget の問題を解決できない場合は、あなたの解決策に従うと思います。

score 1 · Accepted Answer

可能ではないと思います.IEでは使用できますがwindow.event.toElement、firefoxでは機能しません!

score 1 · Accepted Answer

この回答に記載されているように、の値を確認できますdocument.activeElement。documentはグローバル変数であるため、onBlur ハンドラーで使用するために魔法をかける必要はありません。

function myOnBlur(e) {
  if(document.activeElement ===
       document.getElementById('elementToCheckForFocus')) {
    // Focus went where we expected!
    // ...
  }
}

score 1 · Accepted Answer

次のようなものを使用します。

var myVar = null;

そして、あなたの関数の中で：

myVar = fldID;

その後：

setTimeout(setFocus,1000)

その後：

function setFocus(){ document.getElementById(fldID).focus(); }

最終的なコード:

<html>
<head>
    <script type="text/javascript">
        function somefunction(){
            var myVar = null;

            myVar = document.getElementById('myInput');

            if(myVar.value=='')
                setTimeout(setFocusOnJobTitle,1000);
            else
                myVar.value='Success';
        }
        function setFocusOnJobTitle(){
            document.getElementById('myInput').focus();
        }
    </script>
</head>
<body>
<label id="jobTitleId" for="myInput">Job Title</label>
<input id="myInput" onblur="somefunction();"></input>
</body>
</html>

score 0 · Accepted Answer

グローバル変数blurfromとblurtoを使用することをお勧めします。次に、関心のあるすべての要素を構成して、フォーカスを失ったときにDOM内のそれらの位置を変数blurfromに割り当てます。さらに、フォーカスを取得すると変数blurtoがDOM内の位置に設定されるように構成します。次に、別の関数を使用して、blurfromおよびblurtoデータを分析できます。

score 0 · Accepted Answer

explicitOriginalTarget を使用したソリューションは、テキスト入力からテキスト入力へのジャンプでは機能しないことに注意してください。

ボタンを次のテキスト入力に置き換えてみると、違いがわかります。

<input id="btn1" onblur="showBlur(event)" value="text1">
<input id="btn2" onblur="showBlur(event)" value="text2">
<input id="btn3" onblur="showBlur(event)" value="text3">

score 0 · Accepted Answer

編集： 気になるすべての要素のフォーカスを追跡する変数を作成するのがハックな方法です。したがって、「myInput」がフォーカスを失ったことを気にする場合は、変数をフォーカスに設定してください。

<script type="text/javascript">
   var lastFocusedElement;
</script>
<input id="myInput" onFocus="lastFocusedElement=this;" />

元の回答: 関数に「this」を渡すことができます。

<input id="myInput" onblur="function(this){
   var theId = this.id; // will be 'myInput'
}" />

score 0 · Accepted Answer

javascript をコーディングするときにタイムアウトを使用するのは好きではないので、Michiel Borkent とは逆の方法で行います。（コードビハインドは試していませんが、アイデアは得られるはずです）。

<input id="myInput" onblur="blured = this.id;"></input>
<span onfocus = "sortOfCallback(this.id)" id="mySpan">Hello World</span>

頭の中はこんな感じ

<head>
    <script type="text/javascript">
        function sortOfCallback(id){
            bluredElement = document.getElementById(blured);
            // Do whatever you want on the blured element with the id of the focus element


        }

    </script>
</head>

score 0 · Accepted Answer

私はこれと同じ機能で遊んでいて、FF、IE、Chrome、Opera にはイベントのソース要素を提供する機能があることがわかりました。私は Safari をテストしていませんが、似たようなものがあると思います。

$('#Form').keyup(function (e) {
    var ctrl = null;
    if (e.originalEvent.explicitOriginalTarget) { // FF
        ctrl = e.originalEvent.explicitOriginalTarget;
    }
    else if (e.originalEvent.srcElement) { // IE, Chrome and Opera
        ctrl = e.originalEvent.srcElement;
    }
    //...
});

score -3 · Accepted Answer

「this」でonblurイベントを引き起こしたフィールドの参照を渡すことで、jquery経由で簡単に可能だと思います。
例えば

<input type="text" id="text1" onblur="showMessageOnOnblur(this)">

function showMessageOnOnblur(field){
    alert($(field).attr("id"));
}

ありがとう
モニカ

score -3 · Accepted Answer

次のようにすることができます。

<script type="text/javascript">
function myFunction(thisElement) 
{
    document.getElementByName(thisElement)[0];
}
</script>
<input type="text" name="txtInput1" onBlur="myFunction(this.name)"/>

score -3 · Accepted Answer

こちらです：

<script type="text/javascript">
    function yourFunction(element) {
        alert(element);
    }
</script>
<input id="myinput" onblur="yourFunction(this)">

または、JavaScript (この例では jQuery) を介してリスナーをアタッチする場合:

var input = $('#myinput').blur(function() {
    alert(this);
});

編集：申し訳ありません。質問を読み違えました。

javascript - 「ぼかし」イベントが発生した場合、どの要素のフォーカスが *to* に移動したかを調べるにはどうすればよいですか?

23 に答える 23

Related

Reference

javascript - 「ぼかし」イベントが発生した場合、どの要素のフォーカスが to に移動したかを調べるにはどうすればよいですか?