কোন ডিওএম উপাদানটির ফোকাস রয়েছে তা আমি কীভাবে খুঁজে বের করব?


1308

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

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

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


2
: এখানে একটি বুকমার্কলেটে যে ফোকাস সঙ্গে উপাদান console.log হয় github.com/lingtalfi/where-is-focus-bookmarklet
লিং

আপনি find-focused-elementপ্যাকেজটি ব্যবহার করতে পারেন : npmjs.com/package/find-focused-element
ম্যাক্সিম

উত্তর:


1532

ব্যবহার করুন document.activeElement, এটি সমস্ত বড় ব্রাউজারে সমর্থিত।

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

আপনার যদি অপসারণের প্রয়োজন হয় তবে activeElementআপনি ঝাপসা ব্যবহার করতে পারেন; document.activeElement.blur()। এটিকে পরিবর্তন করবে activeElementকরার body

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


53
আইআই সম্পর্কে নিশ্চিত নয়, তবে এফএফ এবং সাফারি উভয়ই BODY উপাদানটি ফেরত দেয়।
জেডাব্লু

10
activeElementআসলে ফোকাসযুক্ত উপাদানটি ফেরত দেয় না। যে কোনও উপাদানটির ফোকাস থাকতে পারে। যদি কোনও নথিতে 4 টি 'স্ক্রোলডিভ' থাকে তবে সেই ডিভগুলির মধ্যে 0 বা 1 টি তীর কী দ্বারা স্ক্রোলযোগ্য। আপনি যদি একটি ক্লিক করেন, তবে এই দ্বিটি ফোকাসযুক্ত। আপনি যদি সবার বাইরে ক্লিক করেন তবে শরীরের দৃষ্টি নিবদ্ধ থাকে। আপনি কীভাবে খুঁজে পাবেন যে কোন স্ক্রোলডিভ केंद्रित? jsfiddle.net/rudiedirkx/bC5ke/show (কনসোল চেক করুন)
রুডি

18
@ রুডি, @ স্টিওয়ার্ট: আরও বিস্তৃত খেলার মাঠ তৈরি করতে আমি আপনার ফিডল তৈরি করেছি: jsfiddle.net/mklement/72rTF । আপনি দেখতে পাবেন যে কেবলমাত্র প্রধান ব্রাউজার (২০১২ সালের শেষের দিকে) আসলে divফায়ারফক্স ১ 17 এবং কেবল এটিতে ট্যাব করে ফোকাস করতে পারে। সমস্ত বড় ব্রাউজারগুলির মাধ্যমে ফিরে আসা উপাদানগুলির ধরণগুলি ইনপুট- সম্পর্কিত উপাদানগুলির document.activeElementমধ্যে সীমাবদ্ধ । যদি এই জাতীয় কোনও উপাদানটির ফোকাস না থাকে তবে সমস্ত বড় ব্রাউজারগুলি উপাদানটি ফেরত দেয় - আইই 9 ব্যতীত, যা উপাদানটি ফেরত দেয় । bodyhtml
mklement0

10
এটি সাহায্য করে কিনা তা নিশ্চিত নন, তবে আপনি ট্যাবডেক্স = "0" বৈশিষ্ট্যটি অন্তর্ভুক্ত করে ডিভের মতো কীবোর্ড ফোকাসের মতো একটি উপাদান তৈরি করতে পারেন
মার্কো লুগলিও

4
যে কোনও অ্যাক্সেসকে document.activeElementএমন কিছুতে আবৃত করা উচিত যা try catchকিছু পরিস্থিতিতে এটি একটি ব্যতিক্রম ছুঁড়ে ফেলতে পারে (কেবল আইই 9 আফাইক নয়)। দেখুন bugs.jquery.com/ticket/13393 এবং bugs.jqueryui.com/ticket/8443
robocat

127

জেডাব্লু দ্বারা বলা হয়েছে, আপনি কমপক্ষে একটি ব্রাউজার-স্বতন্ত্র উপায়ে বর্তমান ফোকাসযুক্ত উপাদানটি খুঁজে পাবেন না। তবে যদি আপনার অ্যাপ্লিকেশনটি কেবলমাত্র আইই হয় (কিছু হ'ল ...) তবে আপনি এটি নিম্নলিখিত উপায়ে খুঁজে পেতে পারেন:

document.activeElement

সম্পাদনা: দেখে মনে হচ্ছে IE এর সব কিছু ভুল ছিল না, এটি এইচটিএমএল 5 খসড়ার অংশ এবং এটি অন্তত Chrome, সাফারি এবং ফায়ারফক্সের সর্বশেষতম সংস্করণ দ্বারা সমর্থিত বলে মনে হচ্ছে।


5
এফএফ 3ও। এটি আসলে "ফোকাস ম্যানেজমেন্ট" এর আশেপাশে এইচটিএমএল 5 অনুচ্ছেদের অংশ।
ক্রিসেন্ট টাটকা

2
এটি ক্রোম এবং অপেরা (9.62) এর বর্তমান সংস্করণে কাজ করে। ওএস এক্স-তে সাফারি ৩.২.৩ এ কাজ করে না, তবে এটি গতকাল প্রকাশিত সাফারি 4-তে কাজ করে :)
গ্রেগাররা

ক্রোম 19 এর জন্য এখনও একই: এস
সেবাস

1
আপনি যখন উপাদানটিতে ট্যাবটি ব্যবহার করতে কীবোর্ডটি ব্যবহার করেন এটি কেবল ক্রোম (20) / সাফারি (5.1.3) এ কাজ করে। আপনি যদি এটিতে ক্লিক করেন তবে জ্যাকোয়ারি: ফোকাস নির্বাচক বা নথি নয় acঅ্যাক্টিভ এলিমেন্ট আপনি যা ক্লিক করেছেন তা ফেরত দিতে সফল হয় না (যথাক্রমে অপরিজ্ঞাত এবং নথির বডি উপাদান ফেরত দেওয়া হয়)। পিএস আমি বিশ্বাস করতে পারি না যে এই থ্রেডটি 2 বছরের পুরানো এবং ওয়েবকিটটিতে এখনও রিগ্রেশন সমস্যা রয়েছে, সেই সাথে যেখানে স্কিপ লিঙ্কগুলি কাজ করে না, তবে পরীক্ষামূলক সিএস 3 যুক্ত করে এত বেশি কাজ করা হচ্ছে। মনে করুন আমি পরিবার ও বন্ধুদের কাছে ফায়ারফক্সের সুপারিশ করতে ফিরে যেতে পারি।
ভোর

আপনি যখন কোনও পাঠ্য অঞ্চল বা অন্য ইনপুটটিতে ফোকাস করতে ক্লিক করেন তখন। ডকুমেন্ট.এটিভএলিমেন্টটি ঠিক আছে। যদি এটি কোনও লিঙ্ক হয় তবে ক্লিক করা হবে (পৃষ্ঠায় বা স্পষ্টত অন্যথায়) ক্লিক করার সময় এটি ফোকাস করবে না।
marksyzm

84

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

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

$(":focus")

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


4
এটি ভাল, তবে jQuery কীভাবে এটি করে? document.activeElement? আমি এটি পেয়েছি: return elem === document.activeElement && (!document.hasFocus || document.hasFocus()) && !!(elem.type || elem.href || ~elem.tabIndex);
হ্যারি পেখোনেন

46

document.activeElementএখন এইচটিএমএল 5 ওয়ার্কিং ড্রাফ্ট স্পেসিফিকেশনের অংশ, তবে এটি এখনও কিছু অ-প্রধান / মোবাইল / পুরানো ব্রাউজারগুলিতে সমর্থিত নাও হতে পারে। আপনি ফিরে যেতে querySelectorপারেন (যদি এটি সমর্থন করে)। এটি উল্লেখ করার মতো বিষয়ও যে কোনও উপাদান ফোকাস না করা থাকলে document.activeElementফিরে আসবে document.body- এমনকি ব্রাউজার উইন্ডোতে ফোকাস না থাকলেও।

নিম্নলিখিত কোডটি এই ইস্যুটি সম্পর্কে কাজ করবে এবং querySelectorকিছুটা আরও ভাল সমর্থন দেওয়ার জন্য ফিরে আসবে ।

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

এই দুটি পদ্ধতির মধ্যে পারফরম্যান্সের পার্থক্যটি লক্ষ্য করার জন্য একটি অতিরিক্ত জিনিস। নির্বাচকদের সাথে দস্তাবেজটি জিজ্ঞাসা করা activeElementসম্পত্তি অ্যাক্সেসের চেয়ে সবসময় ধীর হবে । এই jsperf.com পরীক্ষা দেখুন


21

নিজেই, document.activeElementনথিটি কেন্দ্রীভূত না হলে এখনও একটি উপাদান ফিরে আসতে পারে (এবং এইভাবে নথির কোনও কিছুই কেন্দ্রীভূত নয়!)

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

নীচেগুলি যদি অন্য কোনও হয় তবে আপনাকে কেন্দ্রিক উপাদান দেবে null

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

দৃust়তা দ্রষ্টব্য : কোডটি যেখানে এটির বিপরীতে পরীক্ষা করে document.bodyএবং এর document.documentElementকারণ এটি হয় কারণ কিছু ব্রাউজার এইগুলির মধ্যে একটি ফেরত দেয় বা nullযখন কিছুই কেন্দ্রীভূত হয় না।

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


ফোকাসযুক্ত উপাদান পাওয়ার একটি ( ভারী এয়ারকোটস) "ওয়ান-লাইনার" সংস্করণ এখানে দেওয়া হয়েছে যা ধারণাগতভাবে আরও জটিল কারণ আপনাকে শর্ট সার্কিটিং সম্পর্কে জানতে হবে এবং আপনি জানেন যে, এটি সম্ভবত এক লাইনে ফিট করে না, আপনাকে ধরে নিয়েছে এটি পাঠযোগ্য হতে চান।
আমি এটির প্রস্তাব দিচ্ছি না। তবে আপনি যদি 1337 হ্যাক্স0r, আইডিকে ... এটি আছে there
আপনি || nullযদি falseকিছু ক্ষেত্রে পেতে আপত্তি না করেন তবে আপনিও অংশটি সরিয়ে ফেলতে পারেন । (আপনি এখনও পেতে পারে nullযদি document.activeElementহয় 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;
});

আপনি অ-সন্নিবিষ্ট উপায় ব্যবহার করে প্রাথমিক রাষ্ট্র অনুমান সংশোধন করতে পারেন, তবে তারপরে আপনি সম্ভবত এটি ব্যবহার করতে পারেন।


15

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

এই দুটি আচরণ পারেন কাম্য না হন, তাহলে একটি CSS ভিত্তিক পদ্ধতির বিবেচনা করুন: document.querySelector( ':focus' )


শীতল, হ্যাঁ আমার ক্ষেত্রে আপনার পদ্ধতির নিখরচায় ধারণা তৈরি হয়েছিল। আমি 'ট্যাবিনডেক্স = "- 1" "দিয়ে আমার ফোকাসযোগ্য উপাদানগুলি সেট করতে পারি, যদি তাদের কোনওটিরই ফোকাস না থাকে (আসুন বলে নেওয়া যাক, কিছু পাঠ্য বা চিত্র, যা আমি যত্ন করি না) ডকুমেন্ট.কয়েরি নির্বাচনকারী (': ফোকাস ') রিটার্ন দেয় খালি.
ম্যানফ্রেড

ব্যবহার এড়াতে আমার উত্তর দেখুন querySelector: stackoverflow.com/a/40873560/2624876
1j01

10

আমি জোয়েল এস দ্বারা ব্যবহৃত পদ্ধতির পছন্দ করেছি, তবে এর সরলতাও আমি পছন্দ করি document.activeElement। আমি jQuery ব্যবহার করেছি এবং দুটি মিলিত করেছি। পুরানো ব্রাউজারগুলি সমর্থন করে না যেগুলি 'হ্যাসফোকাস' এর মান সঞ্চয় document.activeElementকরতে ব্যবহার করবে 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);

3
এটি কি উইলিয়াম ডেনিস দ্বারা প্রতিস্থাপন করা যাবে $("*:focus")?
পাইলিনাক্স

আমি মনে করি এটি পারে। আমি এটি অনেক দিন আগে লিখেছিলাম এবং এটির 5 বছর পরে এখনকার মতো আরও ভাল সমাধান পুনর্বিবেচনার কারণ ছিল না। চেষ্টা কর! আমি ঠিক একই কাজ করতে পারে। আমি আমাদের সাইটে কম প্লাগিন! :)
জেসন

10

মটুলগুলিতে এই উদ্দেশ্যে আমি একটি ছোট সহায়ক ব্যবহার করেছি:

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()এমন উপাদানটির সাথে ফোকাস রয়েছে কিনা তা আপনি এটি পরীক্ষা করতে পারেন startFocusTracking()


7

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

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

1
আপনার this.idপরিবর্তে (সর্বদা?) ব্যবহার করা উচিত $(this).attr('id'), বা কমপক্ষে (যখন আপনি সবসময় আপনার jQuery অবজেক্ট রাখবেন) $(this)[0].id। এই স্তরে নেটিভ জাভাস্ক্রিপ্ট ওয়ে এবং দ্রুত এবং আরও দক্ষ। এক্ষেত্রে লক্ষণীয় হতে পারে না, তবে সিস্টেমওয়াইড আপনি একটি পার্থক্য লক্ষ্য করবেন।
মার্টিজন

7

আপনি যদি একটি বস্তুর যে ইনস্ট্যান্সের পেতে চান Element, আপনি ব্যবহার করা আবশ্যক document.activeElement, কিন্তু আপনি একটি বস্তু দৃষ্টান্ত পেতে চান Text, আপনি ব্যবহার করতে অবশ্যই document.getSelection().focusNode

আমি আশা করি সাহায্য করবে।


কীভাবে ভাল?
1j01

আপনার ব্রাউজারের ইন্সপেক্টরটি খুলুন, পৃষ্ঠার যে কোনও জায়গায় ক্লিক করুন, এটি document.getSelection().focusNode.parentElementপেরিয়ে এন্টার টিপুন। এর পরে, অতীত document.activeElementএবং এটি একই কাজ করুন। ;)
rPLurindo

সঙ্গে এই মন্তব্যটি বক্স দৃষ্টি নিবদ্ধ করা, document.activeElementদেয় <textarea>যেহেতু document.getSelection().focusNodeদেয় <td>যে রয়েছে <textarea>(এবং document.getSelection().focusNode.parentElementদেয় <tr>ধারণকারী <td>)
1j01

দুঃখিত, আমার ক্ষমা। আমি এটি ভালভাবে ব্যাখ্যা করিনি। আপনি উদাহরণস্বরূপ যে কোনও অবজেক্ট পেতে চাইলে Elementআপনাকে অবশ্যই ব্যবহার করতে হবে document.activeElement, তবে আপনি যদি কোনও কোনও বস্তুর উদাহরণ পেতে চান তবে Textআপনাকে অবশ্যই ব্যবহার করতে হবে document.getSelection().focusNode। দয়া করে, এটি আবার পরীক্ষা করুন। আমি আশা করি আমি সাহায্য করেছি।
rplaurindo

2
বর্তমানে কোন উপাদানটির ফোকাস রয়েছে তা প্রশ্ন জিজ্ঞাসা করছে। এবং এটি focusNodeকোনও পাঠ্য নোড হওয়ার নিশ্চয়তা নেই।
1j01

6

ডকুমেন্ট.অ্যাকটিভএলমেন্ট ব্যবহারে সম্ভাব্য সমস্যা রয়েছে। বিবেচনা:

<div contentEditable="true">
  <div>Some text</div>
  <div>Some text</div>
  <div>Some text</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;
  }
}

3
এটি আসলে কোনও সমস্যা নয় document.activeElement: অভ্যন্তরীণ <div>উপাদানগুলি প্রকৃতপক্ষে মনোনিবেশ করতে পারে না, কারণ আপনি :focusসিউডো-শ্রেণীর দৃশ্যমান কিছুতে দৃষ্টিশক্তিভাবে দেখতে পারেন (উদাহরণ: jsfiddle.net/4gasa1t2/1 )। আপনি যে বিষয়ে কথা বলছেন তা হ'ল অভ্যন্তরীণ <div>কোনটিতে নির্বাচন বা ক্যারেট রয়েছে যা একটি পৃথক সমস্যা issue
টিম ডাউন

6

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

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

console.logসম্পূর্ণ উপাদানটি মুদ্রণ করা আপনাকে উপাদানটি চিহ্নিত করতে সহায়তা না করে যদি সঠিক উপাদানটি নির্দিষ্ট করতে আপনাকে সাহায্য করার জন্য আলাদা কিছু লগ আউট করতে সংশোধন করুন


5

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

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

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

5

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

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


3

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

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

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

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

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.