जब एक 'धब्बा' घटना होती है, तो मैं कैसे पता लगा सकता हूं कि कौन सा तत्व फोकस * से * में गया है?

Question

मान लीजिए कि मैं blurइस तरह एक HTML इनपुट बॉक्स में एक फ़ंक्शन संलग्न करता हूं :

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

क्या उस तत्व की आईडी प्राप्त करने का एक तरीका है जो blurफ़ंक्शन के कारण घटना (जिस तत्व को क्लिक किया गया था) को आग लगा देता है? कैसे?

उदाहरण के लिए, मान लीजिए कि मेरे पास इस तरह की अवधि है:

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

यदि मैं इनपुट तत्व के फोकस होने के बाद स्पैन पर क्लिक करता हूं, तो इनपुट तत्व अपना फोकस खो देगा। फ़ंक्शन को कैसे पता चलता है कि यह mySpanक्लिक किया गया था?

पुनश्च: यदि इनपुट तत्व के ऑनब्लूर ईवेंट से पहले स्पैन की ऑनक्लिक घटना होती है, तो मेरी समस्या हल हो जाएगी, क्योंकि मैं कुछ स्थिति मान सेट कर सकता हूं जो यह दर्शाता है कि किसी विशिष्ट तत्व को क्लिक किया गया था।

PPS: इस समस्या की पृष्ठभूमि यह है कि मैं अपने सुझावों को दिखाने के लिए बाह्य रूप से एक AJAX ऑटोकंप्लीटर नियंत्रण को ट्रिगर करना चाहता हूं blur, इनपुट तत्वों पर घटना के कारण तुरंत गायब होने वाले सुझावों के बिना । इसलिए मैं blurफ़ंक्शन में जांचना चाहता हूं कि क्या एक विशिष्ट तत्व पर क्लिक किया गया है, और यदि ऐसा है, तो धब्बा घटना को अनदेखा करें।

Comments

यह एक दिलचस्प सवाल है कि मैं तर्क के पीछे देखना पसंद करूंगा - यानी आप ऐसा क्यों कर रहे हैं? संदर्भ क्या है?

— राहुल

राहुल और मुर्गा पालक, मैंने आपकी टिप्पणियों (पीपीएस) की प्रतिक्रिया के रूप में सवाल को अपडेट किया।

— मिचेल बोर्केंट

जैसा कि यह जानकारी थोड़ी पुरानी है, यहां एक नए उत्तर के लिए देखें: stackoverflow.com/questions/7096120/…

— जोनाथन एम

Answer 1

हम्म ... फ़ायरफ़ॉक्स में, आप explicitOriginalTargetउस तत्व को खींचने के लिए उपयोग कर सकते हैं जिस पर क्लिक किया गया था। मुझे toElementIE के लिए भी ऐसा ही करने की उम्मीद थी, लेकिन यह काम नहीं करता है ... हालाँकि, आप दस्तावेज़ से नव-केंद्रित तत्व को खींच सकते हैं:

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" />

---

कैविएट: यह तकनीक कीबोर्ड के साथ फ़ील्ड के माध्यम से टैब करने से होने वाले फ़ोकस परिवर्तन के लिए काम नहीं करती है , और क्रोम या सफारी में बिल्कुल भी काम नहीं करती है। उपयोग करने के साथ बड़ी समस्या (आईई को छोड़कर) है कि यह लगातार जब तक अपडेट नहीं किया गया है के बाद घटना संसाधित किया गया है, और प्रसंस्करण के दौरान सभी में कोई मान्य मान हो सकता है! इस पर एक बदलाव के साथ कम किया जा सकता तकनीक 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);
}

यह अधिकांश आधुनिक ब्राउज़रों में काम करना चाहिए (क्रोम, IE और फ़ायरफ़ॉक्स में परीक्षण), इस चेतावनी के साथ कि क्रोम क्लिक किए गए बटन (बनाम टैब किए गए) पर ध्यान केंद्रित नहीं करता है ।

Comments

मैं एक लंबे समय के लिए clearOriginalTarget की तरह कुछ के लिए देख रहा हूँ। आपने इसे कैसे खोजा?

— केव

फायरबग में घटना वस्तु की जांच की। FWIW, संपत्ति मोज़िला-विशिष्ट है, और MDC पर प्रलेखित है: developer.mozilla.org/en/DOM/event.explicitOriginalTarget

— Shog9

यह काम नहीं करता है (या काम करना बंद कर दिया है?) फ़ायरफ़ॉक्स 3.6 और विंडोज में सफारी 4.0.3।

— चेतन एस

@ जोनाथन: संपत्ति उपलब्ध है, लेकिन blurघटना के आग लगने पर अद्यतन नहीं की जाती है । मैंने विवरण के साथ उत्तर को अपडेट किया है। क्या आपने क्रोम या फ़ायरफ़ॉक्स में इसके लिए सक्रियण का उपयोग करने की कोशिश की है? यह आपको धुंधला होने का तत्व देता है ...

— शोग ९

वास्तव में एफएफ 31 पर काम नहीं कर रहा है: ClearOriginalTarget वर्तमान धब्बा लक्ष्य दिखाती है, document.activeElement कलंक घटना पर शून्य है।

— एड्रियन Maire

Answer 2

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 />

नोट फ़ायरफ़ॉक्स relatedTargetसंस्करण 48 ( बग 962251 , MDN ) तक समर्थन नहीं करेगा ।

Comments

फ़ायरफ़ॉक्स का समर्थन नहीं है, लेकिन एक टिकट है: Bugzilla.mozilla.org/show_bug.cgi?id=687787

— सैंडस्ट्रॉम

अब यह है। देखें यहाँ ।

— rplaurindo

वेब समुदाय से प्यार करें, अब सब कुछ बहुत आसान है ^ _ ^

— am05mhz

महान समाधान। दुर्भाग्य से, relatedTargetवापस आ जाएगी null, तो लक्ष्य प्राप्त फोकस एक इनपुट तत्व नहीं है।

— पेड्रो होहल कारवाल्हो

यदि फोकस तत्व प्राप्त करना कोई इनपुट तत्व नहीं है, तो इसमें एक tabIndex="0"विशेषता जोड़ें और यह काम करेगा

— Dany

Answer 3

मैंने इसे अंततः ऑनब्लूर इवेंट पर एक टाइमआउट के साथ हल किया (एक दोस्त की सलाह के लिए धन्यवाद जो स्टैकऑवरफ्लो नहीं है):

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

एफएफ और आईई दोनों में काम करता है।

Comments

क्या यह जावास्क्रिप्ट वर्ल्ड btw में बुरा अभ्यास माना जाता है?

— १ent बजे मिसेल बोर्केंट

पुरानी पोस्ट लेकिन मेरा एक ही सवाल है। परवाह किए बिना, यह केवल एक चीज है जो काम करने के लिए लगता है क्रॉस-ब्राउज़र।

— joshs

इस जवाब ने कुछ अन्य समस्या को हल करके मेरे TON की मदद की ... धन्यवाद माइकल!

— एलेक्स

@MichielBorkent यह एक बुरा कार्यान्वयन है क्योंकि यह इवेंट संचालित नहीं है। आप दिए गए समय का इंतजार करते हैं और उम्मीद करते हैं कि यह काफी लंबा हो चुका है। जितनी देर आप सुरक्षित रहेंगे, उतनी देर रुकेंगे, लेकिन अगर आपको इतने लंबे समय तक इंतजार करने की जरूरत नहीं है, तो भी अधिक समय बर्बाद होगा। हो सकता है कि कोई व्यक्ति वास्तव में पुराने / धीमे डिवाइस पर हो और यह टाइमआउट पर्याप्त नहीं है। दुर्भाग्य से मैं यहाँ हूँ क्योंकि घटनाओं ने मुझे यह बताने की आवश्यकता नहीं है कि अगर फायरफॉक्स में एक आइफ्रेम पर क्लिक किया जा रहा है तो मुझे यह निर्धारित करने की आवश्यकता है, फिर भी यह अन्य सभी ब्राउज़रों के लिए काम करता है। मैं इस पद्धति का उपयोग करने के लिए बहुत ललचाया जाता हूं, भले ही यह बुरा अभ्यास हो।

— CTS_AE

यह प्रश्न बहुत पुराना है, यह 2008 तक वापस चला गया। इस बीच बेहतर दृष्टिकोण हो सकते हैं। क्या आप 2015 के उत्तर की कोशिश कर सकते हैं?

— मिचेल बोर्केंट

Answer 4

धुंधला के बजाय दस्तावेज़ के मूसडाउन इवेंट का उपयोग करना संभव है:

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

Answer 5

प्रकार के FocusEventउदाहरणों में relatedTargetविशेषता है, हालांकि, एफएफ के संस्करण 47 तक, विशेष रूप से, यह विशेषता 48 से पहले से ही काम करती है।

आप यहाँ और अधिक देख सकते हैं ।

Answer 6

मैं यह भी कोशिश कर रहा हूं कि यदि कोई विशिष्ट तत्व क्लिक किया गया हो और उसके पास काम करने वाला घोल हो, तो ऑटोकंप्लीटर को नजरअंदाज करने की कोशिश की जाती है, लेकिन केवल फायरफॉक्स के कारण।

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 को शांत नहीं करता है, अन्यथा इसे onBlur कहते हैं। इसके साथ एकमात्र समस्या यह है कि यह केवल फ़ायरफ़ॉक्स में काम करता है क्योंकि स्पष्ट ऑरिजिनलटार्ग संपत्ति मोज़िला विशिष्ट है। अब मैं clearOriginalTarget का उपयोग करने की तुलना में एक अलग तरीका खोजने की कोशिश कर रहा हूं। आपके द्वारा बताए गए समाधान में तत्व पर मैन्युअल रूप से ऑनक्लिक व्यवहार जोड़ने की आवश्यकता होती है। यदि मैं clearOriginalTarget समस्या को हल करने का प्रबंधन नहीं कर सकता, तो मुझे लगता है कि मैं आपके समाधान का पालन करूंगा।

Answer 7

क्या आप जाँच कर सकते हैं कि आप क्या और कब कर रहे हैं? अगर आपको याद है कि अंतिम बार क्या हुआ था:

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

और फिर अपने ऑब्जेक्ट के लिए ऑनक्लिक पर क्लिक करें।

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

आपका कार्य तब तय कर सकता है कि Ajax.AutoCompleter नियंत्रण को ट्रिगर किया जाए या नहीं। फ़ंक्शन में क्लिक की गई वस्तु और धुंधली वस्तु है। OnBlur पहले ही हो चुका है इसलिए यह सुझाव गायब नहीं करेगा।

Answer 8

कुछ इस तरह का उपयोग करें:

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>

Answer 9

मुझे लगता है कि यह आईई के साथ नहीं है, आप उपयोग करने की कोशिश कर सकते हैं window.event.toElement, लेकिन यह फ़ायरफ़ॉक्स के साथ काम नहीं करेगा!

Comments

क्रोम या सफारी के साथ काम नहीं करता है। शायद IE के नए संस्करणों के साथ काम नहीं करेगा जो अधिक मानक संगत हैं।

— रोबोकट

Answer 10

जैसा कि इस उत्तर में कहा गया है , आप के मूल्य की जांच कर सकते हैं document.activeElement। documentएक वैश्विक चर है, इसलिए आपको अपने ऑनबॉलर हैंडलर में इसका उपयोग करने के लिए कोई जादू नहीं करना है:

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

Answer 11

• document.activeElement एक मूल नोड हो सकता है (उदाहरण के लिए शरीर का नोड क्योंकि यह एक अस्थायी चरण में एक लक्ष्य से दूसरे पर स्विच करना है), इसलिए यह आपके दायरे के लिए उपयोग करने योग्य नहीं है
• ev.explicitOriginalTarget हमेशा मूल्यवान नहीं होता है

तो सबसे अच्छा तरीका है कि आप अपने नोड (Event.target) को अप्रत्यक्ष रूप से समझने के लिए शरीर की घटना पर ऑन्लाइन का उपयोग करें

Answer 12

Google Chrome v66.x, Mozilla v59.x और Microsoft Edge ... JQuery के साथ काम करता है।

मैं इंटरनेट एक्सप्लोरर 9 में परीक्षण करता हूं और समर्थित नहीं हूं।

$("#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
     }
});

अपना परीक्षण दूसरों के इंटरनेट एक्सप्लोरर संस्करणों में लिखें।

Answer 13

संपादित करें: ऐसा करने का एक हैकरी तरीका यह होगा कि आप एक वैरिएबल बनाएं, जो आपके द्वारा परवाह किए जाने वाले हर तत्व पर ध्यान केंद्रित करता हो। इसलिए, यदि आप ध्यान देते हैं कि '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'
}" />

Comments

यह इस सवाल का जवाब नहीं देता है, उम्मीद है कि मैंने इसे अतिरिक्त उदाहरण के साथ स्पष्ट कर दिया है

— मिचेल बोर्केंट

Answer 14

मेरा सुझाव है कि वैश्विक वैरिएबल ब्लरफ्रॉम और ब्लोटो का उपयोग करें। फिर, उन सभी तत्वों को कॉन्फ़िगर करें जिनके बारे में आप ध्यान देते हैं कि जब वे फ़ोकस खोते हैं तो DOM में उनकी स्थिति को वेरिएबल ब्लरफ्रॉम में असाइन करते हैं। इसके अतिरिक्त, उन्हें कॉन्फ़िगर करें ताकि फ़ोकस प्राप्त करने से DOM में उनकी स्थिति के लिए वैरिएबल ब्लरटो सेट हो जाए । फिर, आप ब्लरफ्रॉम और ब्लोटो डेटा का विश्लेषण करने के लिए एक अन्य फ़ंक्शन का उपयोग कर सकते हैं।

Comments

यह लगभग समाधान है, लेकिन ऑनब्लूर इवेंट हैंडलर में मुझे पहले से ही यह जानना आवश्यक है कि किस आइटम पर क्लिक किया गया था, इसलिए ऑनब्लूर पर एक टाइमआउट मेरे लिए किया।

— २ent बजे मिसेल बोर्केंट

Answer 15

ध्यान रखें, कि clearOriginalTarget वाला समाधान टेक्स्ट-इनपुट-टू-टेक्स्ट-इनपुट जंपर्स के लिए काम नहीं करता है।

निम्नलिखित टेक्स्ट-इनपुट के साथ बटन बदलने का प्रयास करें और आपको अंतर दिखाई देगा:

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

Answer 16

मैं इसी विशेषता के साथ खेल रहा हूं और पता चला है कि एफएफ, आईई, क्रोम और ओपेरा में किसी घटना के स्रोत तत्व प्रदान करने की क्षमता है। मैंने सफारी का परीक्षण नहीं किया है लेकिन मेरा अनुमान है कि ऐसा ही कुछ हो सकता है।

$('#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;
    }
    //...
});

Comments

यह ठीक काम क्यों downvoting? मूल निकालें!

— फकीरी ​​मालेक

Answer 17

मुझे जावास्क्रिप्ट को कोड करते समय टाइमआउट का उपयोग करना पसंद नहीं है इसलिए मैं इसे मिसेल बोर्केंट के विपरीत तरीके से करूंगा। (पीछे कोड की कोशिश नहीं की, लेकिन आपको विचार प्राप्त करना चाहिए)।

<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>

Answer 18

आप IE को ठीक कर सकते हैं:

 event.currentTarget.firstChild.ownerDocument.activeElement

यह एफएफ के लिए "clearOriginalTarget" जैसा दिखता है।

एंटोनी और जे

Answer 19

मैंने एक वैकल्पिक समाधान लिखा कि किसी भी तत्व को ध्यान देने योग्य और "धुंधला" कैसे बनाया जाए।

यह एक तत्व बनाने के रूप में है contentEditableऔर इसे नेत्रहीन रूप से छिपाकर और संपादन मोड को स्वयं अक्षम करने पर आधारित है:

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

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

डेमो

नोट: क्रोम, फ़ायरफ़ॉक्स और सफारी (ओएस एक्स) में परीक्षण किया गया। IE के बारे में निश्चित नहीं है।

---

संबंधित: मैं VueJs के लिए एक समाधान की तलाश कर रहा था, इसलिए जो लोग रुचि रखते हैं / उत्सुक हैं कि कैसे Vue Focusable निर्देश का उपयोग करके ऐसी कार्यक्षमता को लागू किया जाए, कृपया देखें ।

Answer 20

इस तरफ:

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

या यदि आप श्रोता को जावास्क्रिप्ट के माध्यम से संलग्न करते हैं (इस उदाहरण में jQuery):

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

संपादित करें : क्षमा करें। मैंने सवाल को गलत बताया।

Comments

यदि आप जानते हैं कि यह प्रश्न का उत्तर नहीं है और आपने इसे गलत समझा है, तो कृपया इसे तदनुसार अपडेट करें या इसे हटा दें।

— टीजे

Answer 21

मुझे लगता है कि यह "इस" में ऑनब्लूर घटना का कारण बनने वाले क्षेत्र के संदर्भ को पार करके jquery के माध्यम से आसानी से संभव है।
उदाहरण के लिए

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

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

धन्यवाद
मोनिका

Answer 22

आप इसे इस तरह से बना सकते हैं:

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

Answer 23

मैं जवाबों में केवल हैक देखता हूं, लेकिन वास्तव में उपयोग करने के लिए एक बहुत ही आसान समाधान है: मूल रूप से आप फोकस तत्व को इस तरह से कैप्चर कर सकते हैं:

const focusedElement = document.activeElement

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

Comments

कम से कम मेरे मामले में, यह काम नहीं करता है क्योंकि सक्रियकरण शरीर है, अगर मैं इसे अगले रेंडर / चेक पर सही ढंग से सेट करता हूं। लेकिन ऐसा लगता है कि shog9 का समाधान एकमात्र उचित समाधान है क्योंकि यह सुनिश्चित करता है कि टिक टिक कर रहा है।

— मथिजर्स