javascript - আমি কিভাবে DOM উপাদান ফোকাস আছে খুঁজে পেতে পারি?




(11)

আমি জাভাস্ক্রিপ্টে খুঁজে বের করতে চাই, কোন উপাদানটি বর্তমানে ফোকাস করেছে। আমি ডোমের সন্ধান পেয়েছি এবং এখনও আমার যা দরকার তা পাওয়া যায় নি। এটা করার একটি উপায় আছে, এবং কিভাবে?

কারণ আমি এই খুঁজছেন ছিল:

আমি তীরগুলির মত কীগুলি তৈরি করার চেষ্টা করছি এবং ইনপুট উপাদানের একটি টেবিলের মাধ্যমে নেভিগেট করতে চেষ্টা করছি। ট্যাব এখন কাজ করে, কিন্তু লিখুন, এবং তীর এটি ডিফল্ট দ্বারা না মনে হয়। আমি কী হ্যান্ডলিং অংশ সেট আপ পেয়েছিলাম কিন্তু এখন আমি ইভেন্ট হ্যান্ডলিং ফাংশন উপর ফোকাস সরানো কিভাবে চিন্তা করতে হবে।


Djo সঙ্গে, আপনি dijit.getFocus () ব্যবহার করতে পারেন


Document.activeElement ব্যবহার করুন, এটি সমস্ত প্রধান ব্রাউজারে সমর্থিত।

পূর্বে, আপনি কোন ফরম ক্ষেত্রটি ফোকাস করেছেন তা খুঁজে বের করার চেষ্টা করছেন, আপনি করতে পারছেন না। পুরানো ব্রাউজারগুলির মধ্যে সনাক্তকরণ অনুকরণ করতে, সমস্ত ক্ষেত্রগুলিতে একটি "ফোকাস" ইভেন্ট হ্যান্ডলার যুক্ত করুন এবং একটি পরিবর্তনশীলতে শেষ-ফোকাস ক্ষেত্রটি রেকর্ড করুন। শেষ-ফোকাস ক্ষেত্রের জন্য একটি ব্লুর ইভেন্টের উপর পরিবর্তনশীল সাফ করার জন্য একটি "ব্লার" হ্যান্ডলার যোগ করুন।

সম্পর্কিত লিংক:


JQuery সমর্থন করে :focus বর্তমান হিসাবে :focus ছদ্ম-শ্রেণী। আপনি যদি JQuery ডকুমেন্টেশনের জন্য এটি সন্ধান করেন, তবে "সিলেক্টরস" এর অধীনে চেক করুন যেখানে এটি আপনাকে W3C CSS ডক্সগুলিতে নির্দেশ করে । আমি ক্রোম, এফএফ, এবং IE 7+ দিয়ে পরীক্ষা করেছি। উল্লেখ্য যে এটি IE তে কাজ করার জন্য, <!DOCTYPE... HTML পৃষ্ঠায় থাকা আবশ্যক। এখানে এমন একটি উদাহরণ রয়েছে যা আপনি এমন উপাদানটিতে একটি আইডি নিযুক্ত করেছেন যা ফোকাস করেছে:

$(":focus").each(function() {
  alert($(this).attr("id") + " has focus!");
});

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() প্রদত্ত উপাদানের উপর ফোকাস করা হয়েছে কিনা তা পরীক্ষা করে দেখতে পারেন।


আপনি যদি jQuery ব্যবহার করছেন, তবে কোনও উপাদানটি সক্রিয় কিনা তা অনুসন্ধান করতে আপনি এটি ব্যবহার করতে পারেন:

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

আপনি যদি jQuery ব্যবহার করতে পারেন, এটি এখন সমর্থন করে: ফোকাস, আপনি নিশ্চিত করুন যে আপনি সংস্করণ 1.6+ ব্যবহার করছেন।

এই বিবৃতি আপনি বর্তমানে ফোকাস উপাদান পাবেন।

$(":focus")

থেকে: কীভাবে একটি উপাদান নির্বাচন করবেন যা jQuery এ এটির উপর ফোকাস করে


জোয়েল এস দ্বারা ব্যবহৃত পদ্ধতিটি আমি পছন্দ করি, কিন্তু আমি document.activeElement সাদৃশ্যকেও ভালবাসি। সক্রিয়করণ। আমি jQuery ব্যবহার এবং দুই মিলিত। পুরোনো ব্রাউজার যা document.activeElement সমর্থন করে না। ActiveElement 'hasFocus' এর মান সংরক্ষণ করতে jQuery.data() ব্যবহার করবে। নতুন ব্রাউজার document.activeElement ব্যবহার করবে। আমি যে document.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 পরিবর্তন করতে মুক্ত হন।


যদি কোন ফোকাসযোগ্য উপাদান ফোকাস হয় না তবে document.activeElement <body> উপাদানটি ডিফল্ট হতে পারে। অতিরিক্তভাবে, যদি একটি উপাদান ফোকাস করা হয় এবং ব্রাউজার উইন্ডোটি অস্পষ্ট হয়, তবে activeElement ফোকাস উপাদানটি ধরে রাখতে থাকবে।

যদি এই দুইটি আচরণের কোনটিই পছন্দসই না হয় তবে CSS- ভিত্তিক পদ্ধতি বিবেচনা করুন: document.querySelector( ':focus' )


সমাধানটি দেওয়ার জন্য এখানেই এটিকে ঢোকা আমি শেষ পর্যন্ত এসেছি।

আমি document.activeInputArea নামক একটি সম্পত্তি তৈরি করেছি এবং তীর কী, ট্যাব এবং প্রবেশের জন্য কীবোর্ড ইভেন্টগুলি আটকাতে jQuery এর HotKeys addon ব্যবহার করেছি এবং ইনপুট উপাদানের মধ্যে ক্লিক করার জন্য একটি ইভেন্ট হ্যান্ডলার তৈরি করেছি।

তারপর আমি প্রতিটি সময় ফোকাস পরিবর্তন করে ActiveInputArea সামঞ্জস্য করেছি, তাই আমি যেখানে ছিল তা খুঁজে বের করতে আমি সেই সম্পত্তিটি ব্যবহার করতে পারি।

যদিও এটি আপ স্ক্রু করা সহজ, কারণ যদি আপনার সিস্টেমে একটি বাগ থাকে এবং আপনি যেখানে এটি মনে করেন তা ফোকাস করা হয় তবে সঠিক ফোকাসটি পুনরুদ্ধার করা খুব কঠিন।


document.activeElement যদি ফোকাস না থাকে তবে ডকুমেন্ট.অ্যাক্টিভ্যালমেন্টটি এখনও একটি উপাদান ফিরিয়ে দিতে পারে (এবং নথিতে এইভাবে কিছুই নিবদ্ধ করা হয় না !)

আপনি যে আচরণটি চান, অথবা এটি কোনও ব্যাপার না (যেমন একটি keydown ইভেন্টের মধ্যে), কিন্তু যদি আপনাকে কিছু জানাতে হয় তবে এটি আসলেই ফোকাস করা হয়, আপনি অতিরিক্তভাবে document.hasFocus() পরীক্ষা করতে পারেন।

নিচের কোনটি যদি না থাকে তবে নিচের দিকে দৃষ্টি নিবদ্ধ করা হবে।

var focused_element = null;
if (
    document.hasFocus() &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement
) {
    focused_element = document.activeElement;
}

একটি নির্দিষ্ট উপাদান ফোকাস আছে কিনা তা পরীক্ষা করার জন্য , এটি সহজ:

var input_focused = document.activeElement === input && document.hasFocus();

কিছু ফোকাস কিনা তা পরীক্ষা করার জন্য, এটি আবার আরও জটিল:

var anything_is_focused = (
    document.hasFocus() &&
    document.activeElement !== null &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement
);

দৃঢ়তা নোট : কোডটিতে এটি document.body এবং document.documentElement বিরুদ্ধে চেক যেখানে এটি কিছু কারণ যখন কোনও ব্রাউজার এইগুলির মধ্যে একটি বা null ফিরিয়ে দেয়।

<html> (অথবা সম্ভবত <html> ) এর একটি tabIndex বৈশিষ্ট্য ছিল এবং এটি আসলেই ফোকাস করা যেতে পারে tabIndex জন্য এটি অ্যাকাউন্ট নয়। আপনি যদি কোন লাইব্রেরি বা কিছু লেখেন এবং এটি শক্ত হতে চান তবে আপনাকে সম্ভবত যেভাবে হ্যান্ডেল করতে হবে।

এখানে একটি ( ভারী বিমানবাহক) দৃষ্টিভঙ্গি প্রাপ্তির "এক-মাছ ধরার যন্ত্র" সংস্করণটি, যা ধারণাগতভাবে আরও জটিল কারণ আপনাকে স্বল্প-সার্কিটিং সম্পর্কে জানাতে হবে এবং আপনি জানেন, এটি সম্ভবত এক লাইনের সাথে মেলে না, আপনি এটা পঠনযোগ্য হতে চান।
আমি এই এক সুপারিশ করছি না। কিন্তু যদি আপনি 1337 হ্যাকসআর হন, আইডিকে ... এটা সেখানে আছে।
আপনিও এটি মুছে ফেলতে পারেন আপনি কিছু ক্ষেত্রে false পেয়ে মনে না হলে || null অংশ। (যদি document.activeElement null থাকে তবে আপনি এখনও null পেতে পারেন):

var focused_element = (
    document.hasFocus() &&
    document.activeElement !== document.body &&
    document.activeElement !== document.documentElement &&
    document.activeElement
) || null;

কোনও নির্দিষ্ট উপাদানটি ফোকাস করা আছে কিনা তা পরীক্ষা করার জন্য, বিকল্পভাবে আপনি ইভেন্টগুলি ব্যবহার করতে পারেন তবে এইভাবে সেটআপের (এবং সম্ভাব্য টিয়ারডাউন) প্রয়োজন হয়, এবং গুরুত্বপূর্ণভাবে, একটি প্রাথমিক অবস্থা অনুমান করে :

var input_focused = false;
input.addEventListener("focus", function() {
    input_focused = true;
});
input.addEventListener("blur", function() {
    input_focused = false;
});

আপনি অ-ইভেন্টযুক্ত উপায়ে ব্যবহার করে প্রাথমিক রাষ্ট্র অনুমানটি ঠিক করতে পারেন, তবে তারপরে আপনি তার পরিবর্তে এটি ব্যবহার করতে পারেন।






dom