ときに"ブラ'イベントが発生したいので見る要素に注力したへ?

https://stackoverflow.com/questions/121499

02-07-2019
|

質問

仮に取り付ける blur 機能のドキュメントを編集するには、入力ボックスのようになります:

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

がわかりやすく伝えるためのIDの要素によ blur イベント火災の要素をクリックされた内部に機能しているのでしょうか。いかがですか？

たとえば、いスパンのようになります:

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

ればをクリックの直後に入力要素がフォーカスを取得し、入力要素が失われます。どのような機能を知ることで mySpan クリックされた?

PS:場合、onclickイベントのスパンが起こる前のonblurイベントの入力要素が私の問題、果たすことができるのであろうか一部の状況を示す値の特定の要素たってボタンをクリックします。

PPS:その背景にこの問題にしたいトリガー AJAX autocompleter制御を外部からクリック要素をその提案の提案をすぐに消えら blur イベントの入力要素です。していきたいなと思っていますチェックイン blur されている場合はいずれかの特定の要素をクリックすれば、その場合、無視するブレイベントです。

解決

Hmm...Firefoxで使用でき explicitOriginalTarget を引っ張る要素をクリックされた。見 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" />

警告: この技術はない作業フォーカス変更によるタブ通分野のキーボードを使用して本機は動作しません全クロムまたはサファリがあります。の大きな問題を activeElement 以外のものにIEでは常に最新の情報まで後の blur イベントを処理などで有効な値ですべての処理中に!この影響を和らげることができ、バリエーションその技術Michiel期用:

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の点に注意するクロムとなる焦点ボタンを クリック 対ブーンです。

他のヒント

2015年答え:による UIイベント, 利用可能です relatedTarget 件のイベント：

を識別するために使用する二次 EventTarget 関連を中心イベントの種類によってイベントです。

のための 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).

いるので最終的にタイムアウトのonblurイベントへの友人はいないStackOverflow):

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

製FFとが打ち出されている。-

を採用することも可能ですmousedownイベントの文書の代わりにブラー:

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

タイプ FocusEvent インスタンスしてい relatedTarget 属性には、バージョン47のFF、具体的には、この属性はnullを返しますから、48ています。

できる。こちらの.

私はもうAutocompleterぶれを無視する場合は特定の要素をクリックして働き、そのためのFirefoxのみによるexplicitOriginalTarget

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);
                }
            }
        }
    );

このコードラップデフォルトのonBlur方法AutocompleterやかどうかをチェックしますignoreBlurEventElementパラメータを設定します。設定されている場合は、チェックの詳細を見ればをクリック要素であignoreBlurEventElementいます。れた場合は、Autocompleterなcal onBlurこの電話onBlur.新しいことだけでFirefoxでexplicitOriginalTarget性はMozilla固有のものです。そして今、私と異なる方法を使explicitOriginalTarget.を解き上が必要ですonclickの行動を手動での要素となります。場合では管理できない解決explicitOriginalTarget問題ないといけないと思い、いください。

きの逆はいかが？確認ますか？その場合は私たぼやけ前:

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

そのonClick属性におスパンコーダー接続■通話機能名()の両方のオブジェクト

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

機能ができるようになるか否かについてのAjax.AutoCompleterます。この機能はクリックオブジェクトや同じオブジェクトです。のonBlurはすでに起こったことがないようにご提案がなくなります。

のものを使っておけば間違いないようになります:

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>

しかったですpossibe, 培を試すことができます使用 window.event.toElement, でdosnようにしたfirefox!

として注目この答え, チェックしておきの値 document.activeElement. document はグローバル変数になんな魔法をご利用いonBlurハンドラ:

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

書きします。activeElementが親ノード(例えば、身体のノードで一時的相からの切り替えの対象も、そのままでは使えないお範囲
evです。explicitOriginalTargetいうことを非常に大切に

その最良の方法は使用onclick体のイベントのための理解を間接的におノード（イベントです。目標はブラー

編集： A hackyないということを変数を追跡して管理する中心的な各要素ます。だが'myInput"失われた、設定変数です。

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

独自の回答：で渡すことができます(この機能です。

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

であることをグローバル変数blurfromとblurto.そして、設定すべての要素がすべてをその位置のDOMの変blurfromいう。また、設定のないように得点を設定し、可変blurtoるその位置のDOM.その後、他の全ての機能解析のためblurfromとblurtoデータです。

約への同意が必要となるのか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">

まこれと同じ機能を見つけることFF、IE、クロム、オペラを提供力の根源的な要素のイベントです。まだ試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;
    }
    //...
});

りません使用する際のタイムアウト符号がございましたら、きっと幸せにしてあげれると思うので反対側の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>

を行うことは可能でIE：

 event.currentTarget.firstChild.ownerDocument.activeElement

う"explicitOriginalTarget"のFF.

Antoine J

しっかりとしたュニケーションどのように他の要素にフォーカスが設定は、"blurable".

この基要素として contentEditable を見せたり隠したりし視覚的にも効編集モードそのもの:

el.addEventListener("keydown", function(e) {
  e.preventDefault();
  e.stopPropagation();
});

el.addEventListener("blur", cbBlur);
el.contentEditable = true;

デモ

注意：試験Chrome、Firefox、Safari(mac OS X).からないので打ち出されている。-

関連：いた液VueJsいによる様々なスタイル、考え方/奇妙などを実施し、このような機能を利用ビューフォーカスが設定指令ください見.

作品をGoogle Chrome v66.x、Mozilla v59.xおよびMicrosoftエッ---液jQuery.

私は試験Internet Explorer9対応しておりません。

$("#YourElement").blur(function(e){
     var InputTarget =  $(e.relatedTarget).attr("id"); // GET ID Element
     console.log(InputTarget);
     if(target == "YourId") { // If you want validate or make a action to specfic element
          ... // your code
     }
});

コメントテストその他インターネットexplorerバージョン

しか見hacksの回答があり、実際組み込みソ非常に使いやすい:基本的にはできるの要素のようになります:

const focusedElement = document.activeElement

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement

この方法：

<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);
});

編集:います。私道に惑の問題をもたらしていました。

と思うので簡単にできるだけjqueryを参考に分野のonblurイベント"。
用例

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

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

感謝
Monika

かのようになります:

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

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

ときに"ブラ'イベントが発生したいので見る要素に注力した*へ*?

ときに"ブラ'イベントが発生したいので見る要素に注力したへ?