javascript - w3schools - मैं कैसे पता लगा सकता हूं कि कौन से डीओएम तत्व पर ध्यान केंद्रित किया गया है?




w3schools python (12)

मैं जावास्क्रिप्ट में पता लगाना चाहता हूं, वर्तमान में किस तत्व पर ध्यान केंद्रित किया गया है। मैं डोम के माध्यम से देख रहा हूं और मुझे जो चाहिए वह नहीं मिला है। क्या ऐसा करने का कोई तरीका है, और कैसे?

कारण मैं इसे ढूंढ रहा था:

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


Document.activeElement का उपयोग करने में संभावित समस्याएं हैं। विचार करें:

<div contentEditable="true">
  <div>Some text</div>
  <div>Some text</div>
  <div>Some text</div>
</div>

यदि उपयोगकर्ता आंतरिक-div पर केंद्रित है, तो document.activeElement अभी भी बाहरी div का संदर्भ देता है। आप दस्तावेज़.एक्टिव एलिमेंट का उपयोग यह निर्धारित करने के लिए नहीं कर सकते कि आंतरिक div के किस पर ध्यान केंद्रित किया गया है।

निम्नलिखित कार्य इस के आसपास हो जाता है, और केंद्रित नोड लौटाता है:

function active_node(){
  return window.getSelection().anchorNode;
}

यदि आप केंद्रित तत्व प्राप्त करेंगे, तो इसका उपयोग करें:

function active_element(){
  var anchor = window.getSelection().anchorNode;
  if(anchor.nodeType == 3){
        return anchor.parentNode;
  }else if(anchor.nodeType == 1){
        return anchor;
  }
}

Document.activeElement का उपयोग करें, यह सभी प्रमुख ब्राउज़रों में समर्थित है।

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

सम्बंधित लिंक्स:


Mootools में इन उद्देश्यों के लिए मैंने एक छोटा सा सहायक उपयोग किया है:

FocusTracker = {
    startFocusTracking: function() {
       this.store('hasFocus', false);
       this.addEvent('focus', function() { this.store('hasFocus', true); });
       this.addEvent('blur', function() { this.store('hasFocus', false); });
    },

    hasFocus: function() {
       return this.retrieve('hasFocus');
    }
}

Element.implement(FocusTracker);

इस तरह आप यह जांच सकते हैं कि तत्व el.hasFocus() साथ ध्यान केंद्रित कर रहा है el.hasFocus() बशर्ते कि दिए गए तत्व पर startFocusTracking() को कॉल किया गया हो।


अन्य उत्तरों को पढ़ना, और खुद को कोशिश करना, ऐसा लगता है कि document.activeElement .activeElement आपको अधिकांश ब्राउज़र में आवश्यक तत्व प्रदान करेगा।

यदि आपके पास ऐसा ब्राउज़र है जो दस्तावेज़ का समर्थन नहीं करता है। सक्रियता अगर आपके पास jQuery है, तो आप इसे सभी फोकस ईवेंट पर इस तरह के कुछ सरल के साथ पॉप्युलेट कर सकते हैं (अवांछित क्योंकि मेरे पास उन मानदंडों को हाथ से प्राप्त करने वाला ब्राउज़र नहीं है ):

if (typeof document.activeElement === 'undefined') { // Check browser doesn't do it anyway
  $('*').live('focus', function () { // Attach to all focus events using .live()
    document.activeElement = this; // Set activeElement to the element that has been focussed
  });
}

इसे प्राप्त करने के लिए लगभग एक ब्राउज़र स्वतंत्र तरीका बहुत समय पहले क्विर्कमोड द्वारा बनाया गया था। इसमें सफारी के साथ समस्या हो सकती है क्योंकि सफारी हमेशा क्रोम या फ़ायरफ़ॉक्स की तुलना में समान तत्वों पर ईवेंट सेट नहीं करता है। कभी-कभी सफारी भी तत्व के बजाय टेक्स्टनोड पर ईवेंट सेट करता है। इसे बाद में संशोधित किया जा सकता है (नोड टाइप टाइप करके)।

यह रहा:

  function getFocus(e){
    var focused;
    if (!e) var e = window.event;
    if (e.target) focused = e.target;
    else if (e.srcElement) focused = e.srcElement;
    if (focused.nodeType == 3) focused = focused.parentNode;
    if (document.querySelector) {
      return focused.id;
    } else if (!focused || focused == document.documentElement) {
      return focused;
    }
  }

आशा करता हूँ की ये काम करेगा।

Quirksmode के लिए धन्यवाद


जैसा कि जेडब्ल्यू ने कहा है, आप कम से कम ब्राउज़र-स्वतंत्र तरीके से वर्तमान केंद्रित तत्व नहीं ढूंढ सकते हैं। लेकिन अगर आपका ऐप केवल आईई है (कुछ हैं ...), तो आप इसे निम्न तरीके से पा सकते हैं:

document.activeElement

संपादित करें: ऐसा लगता है कि आईई के पास सब कुछ गलत नहीं था, यह HTML5 ड्राफ्ट का हिस्सा है और कम से कम क्रोम, सफारी और फ़ायरफ़ॉक्स के नवीनतम संस्करण द्वारा समर्थित है।


मुझे जोएल एस द्वारा उपयोग किया जाने वाला दृष्टिकोण पसंद आया, लेकिन मुझे document.activeElement की सादगी भी पसंद है। सक्रियता। मैंने jQuery का उपयोग किया और दोनों को संयुक्त किया। पुराने ब्राउज़र जो document.activeElement का समर्थन नहीं करते हैं jQuery.data() 'हैफोकस' के मान को संग्रहीत करने के लिए jQuery.data() का उपयोग करेगा। नए ब्राउज़र document.activeElement एलिमेंट का उपयोग करेंगे। मुझे लगता है कि document.activeElement .activeElement बेहतर प्रदर्शन होगा।

(function($) {
var settings;
$.fn.focusTracker = function(options) {
    settings = $.extend({}, $.focusTracker.defaults, options);

    if (!document.activeElement) {
        this.each(function() {
            var $this = $(this).data('hasFocus', false);

            $this.focus(function(event) {
                $this.data('hasFocus', true);
            });
            $this.blur(function(event) {
                $this.data('hasFocus', false);
            });
        });
    }
    return this;
};

$.fn.hasFocus = function() {
    if (this.length === 0) { return false; }
    if (document.activeElement) {
        return this.get(0) === document.activeElement;
    }
    return this.data('hasFocus');
};

$.focusTracker = {
    defaults: {
        context: 'body'
    },
    focusedElement: function(context) {
        var focused;
        if (!context) { context = settings.context; }
        if (document.activeElement) {
            if ($(document.activeElement).closest(context).length > 0) {
                focused = document.activeElement;
            }
        } else {
            $(':visible:enabled', context).each(function() {
                if ($(this).data('hasFocus')) {
                    focused = this;
                    return false;
                }
            });
        }
        return $(focused);
    }
};
})(jQuery);

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

setInterval(function() { console.log(document.querySelector(":focus")); }, 1000);

पूरे तत्व को प्रिंट करते समय सटीक तत्व को इंगित करने में मदद के लिए console.log को संशोधित करने के लिए स्वतंत्र महसूस करें, तत्व को इंगित करने में आपकी सहायता नहीं करता है।


यदि आप jQuery का उपयोग कर रहे हैं, तो आप यह पता लगाने के लिए इसका उपयोग कर सकते हैं कि कोई तत्व सक्रिय है या नहीं:

$("input#id").is(":active");

यदि आप jQuery का उपयोग कर सकते हैं, तो यह अब समर्थन करता है: फोकस करें, बस सुनिश्चित करें कि आप संस्करण 1.6+ का उपयोग कर रहे हैं।

यह कथन आपको वर्तमान में केंद्रित तत्व प्राप्त करेगा।

$(":focus")

प्रेषक: jQuery पर इसके साथ फ़ोकस करने वाले तत्व का चयन कैसे करें


document.activeElement <body> तत्व पर डिफ़ॉल्ट हो सकता है यदि कोई फोकस करने योग्य तत्व फोकस में नहीं हैं। इसके अतिरिक्त, यदि कोई तत्व केंद्रित है और ब्राउज़र विंडो धुंधली है, तो activeElement एलिमेंट फ़ोकस तत्व को जारी रखेगा।

यदि इनमें से कोई भी व्यवहार वांछनीय नहीं है, तो एक सीएसएस-आधारित दृष्टिकोण पर विचार करें: document.querySelector( ':focus' )


document.activeElement अब HTML5 वर्किंग ड्राफ्ट विनिर्देश का हिस्सा है , लेकिन हो सकता है कि यह अभी तक कुछ गैर-प्रमुख / मोबाइल / पुराने ब्राउज़र में समर्थित न हो। आप querySelector वापस आ सकते हैं (यदि वह समर्थित है)। यह भी उल्लेखनीय है कि document.activeElement .activeElement document.activeElement वापस करेगा। अगर कोई तत्व केंद्रित नहीं है - भले ही ब्राउज़र विंडो पर ध्यान केंद्रित न हो।

निम्न कोड इस समस्या के आसपास काम करेगा और थोड़ा बेहतर समर्थन देने के लिए querySelector वापस आ जाएगा।

var focused = document.activeElement;
if (!focused || focused == document.body)
    focused = null;
else if (document.querySelector)
    focused = document.querySelector(":focus");

नोट करने के लिए एक अतिरिक्त बात इन दो तरीकों के बीच प्रदर्शन अंतर है। चयनकर्ताओं के साथ दस्तावेज़ activeElement संपत्ति तक पहुंचने से हमेशा धीमा होगा। यह jsperf.com परीक्षण देखें।






dom