জাভাস্ক্রিপ্ট ফোকাস () ফাংশন ব্যবহার করে কোনও <ডিভি>> এ ফোকাস করা সম্ভব?

227

<div>জাভাস্ক্রিপ্ট focus()ফাংশন ব্যবহার করে কি ফোকাস করা সম্ভব ?

আমার একটা <div>ট্যাগ আছে

<div id="tries">You have 3 tries left</div>

আমি <div>ব্যবহার করে উপরের উপর দৃষ্টি নিবদ্ধ করার চেষ্টা করছি :

document.getElementById('tries').focus();

কিন্তু এটি কাজ করে না। কেউ কি কিছু প্রস্তাব দিতে পারে ....?

javascript focus

— ওএম অনন্তকাল
সূত্র

3

আপনি যখন এটি 'ফোকাস' করেন তখন আপনি কী হতে চান? ডিভগুলি ইনপুট গ্রহণ করে না, তাই আপনি কি বর্ডারটি ফ্ল্যাশ করতে চান, বা কোনও পটভূমি হাইলাইট ইত্যাদি ফ্ল্যাশ করতে চান?

— মাইকেল শিম্মিনস

@ মিশেল, হ্যাঁ আমার ব্যবহারকারীর দৃষ্টি আকর্ষণ করার জন্য <ডিভ> দরকার ...

— ওএম দ্য এন্টারনিটি

1

কোন এইচটিএমএল উপাদানগুলি ফোকাস পেতে পারে তার

— সিরো সান্তিলি 郝海东冠状病六四事件法轮功

1

@ মিশেলশিম্মিনস এবং অন্য যে কেউ, <ডিভ> উপাদানগুলি যদি আপনার কাছে সন্তুষ্টযোগ্য সেট থাকে তবে উপাদানগুলি ইনপুট গ্রহণ করতে পারে। (আমি কেন জিজ্ঞাসা করেছি কারণ)

— ম্যাটলিভিস

1

@ মিশেলশিমিনসগুলি divইনপুট গ্রহণ করতে পারে যদি তারা উপচে পড়ে এবং কোনও স্ক্রোল বার দেখায়। যখন একটি divস্ক্রোল বার সহ একটি কেন্দ্রীভূত হয়, তীর কীগুলি এর সামগ্রীগুলি (যেমন অন্যান্য উপাদানগুলির সামগ্রীর পরিবর্তে) স্ক্রোল করে body।

— ররি ও'কেনে

101

window.location.hash = '#tries';

এটি প্রশ্নের মধ্যে থাকা উপাদানটিতে স্ক্রোল করবে, এটি মূলত "ফোকাস" করুন ing

— ক্যাসি চু
সূত্র

2

@ ক্যাসি চু: এটি ঠিক যেমন কাজ করে তবে ফায়ারফক্সে নয়, আপনার কি ধারণা আছে?

— হাসিব আখতার

এটি কিছু ক্রোম সংস্করণে কাজ করে না ... তবে @ভিনথস সমাধান এটি করে

— Charliemops

1

এটি কাজ করে তবে ... কৌনিক সহ আপনার সমস্যা হবে !!

— কার্লোস ভারডেস

@CarlosVerdes; কৌণিক জন্য কোন সমাধান আছে?

— ম্যাক উইজিস

3

'ফোকাস' প্রশ্নের উত্তর না দিয়ে, এটি সঠিক উত্তর হওয়া উচিত নয়। আমার ক্ষেত্রে, আমি একটি 'কন্টেন্টএডেটেবল' ডিভিতে ফোকাস করতে চাই এবং আপনার কৌশলটি কোনও কাজে দেয় না।

— আর্নুদম্বরো

453

হ্যাঁ - এটি সম্ভব। এটি করার জন্য, আপনাকে একটি ট্যাবিনডেক্স নির্ধারণ করতে হবে ...

<div tabindex="0">Hello World</div>

0 এর একটি ট্যাবিন্দেক্স ট্যাগটি "পৃষ্ঠার প্রাকৃতিক ট্যাব ক্রমটিতে" রাখবে। একটি উচ্চতর নম্বর এটিকে অগ্রাধিকারের একটি নির্দিষ্ট ক্রম দেবে, যেখানে 1 হবে প্রথম, 2 দ্বিতীয় এবং আরও।

আপনি -1 এর একটি ট্যাবিনডেক্সও দিতে পারেন, যা কেবলমাত্র স্ক্রিপ্ট দ্বারা ডিভকে ফোকাস-সক্ষম করবে, ব্যবহারকারীকে নয়।

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

স্নিপেট প্রসারিত করুন

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

— মধ্যে Fenton
সূত্র

6

@ মিশেল শিম্মিনস, এটি উপাদানকে ফোকাসযোগ্য হতে পারে (একটি অ-মানক উপায়ে!) দিয়ে focus()।

— স্টারগার

2

@ অলিকাল - আমি বেশ নিশ্চিত যে এটি উত্তরের শেষ লাইনে যা বলেছিল ঠিক সেটাই বলে। আপনি যদি মনে করেন কোনও সমস্যা আছে যা সম্পাদনা দরকার me

— ফেন্টন

2

যদি এটি স্পষ্ট না tabindexহয়ে থাকে তবে কোনও উপাদানকে যুক্ত করা এটি মনোনিবেশযোগ্য করে তুলবে, যা পদ্ধতি focus()এবং blur()পদ্ধতিগুলিকে সক্ষম করে এবং তারপরে আপনি এইরকম মনোযোগ কেন্দ্রীভূত করতে পারেন:document.getElementById('tries').focus();

— pilau

4

হাই @ স্টিভওউইন - এটি এখনও ফায়ারফক্স ভি 42 এ কাজ করছে বলে মনে হচ্ছে। আমি এই উত্তরে একটি স্নিপেট যুক্ত করেছি যাতে আপনি এটি চালাতে এবং পরীক্ষা করতে পারেন।

— ফেন্টন

9

@ স্টিওউইন ব্যবহার করে window.location.hash = ...এটি করার উপায়। ফোকাসের অর্থ "দর্শনে আনা" নয়, এর অর্থ আক্ষরিক অর্থে সেই উপাদানটির উপরে ফোকাস রাখুন place

— ফেন্টন

76

document.getElementById('tries').scrollIntoView()কাজ করে। window.location.hash আপনার স্থিতি স্থির করার চেয়ে এটি আরও ভাল কাজ করে ।

— vinoths
সূত্র

2

নোট করুন যে এই সমাধানটি আইই, অপেরা বা সাফারি তে কাজ করবে না।

— অ্যালেকারস্ট

1

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

— thdoan

@ ওম-দি-অনন্তকাল ইতিমধ্যে জানিয়েছে যে তিনি ডিভটি ব্যবহারকারীর দৃষ্টি আকর্ষণ করতে চান, তাই তার যা প্রয়োজন তা আসলে ফোকাস না করা (এমনকি কাজ করার সময় এটি করা ঠিক নয়) ডিভটি নয়, তবে এটি পর্দায় নিয়ে আসা , এটি সমাধান করে

— ওমর ওয়াজকিজ

আমি যদি ক্রোমে এটি করি তবে এটি স্থির-কেন্দ্রীভূত ইনপুট ক্ষেত্রে আবার স্ক্রোল করতে থাকবে। বিশেষত যদি পৃষ্ঠাটি এখনও লোড করা না হয়ে থাকে।

— রজার ক্রুয়েজার

37

আপনি tabindex ব্যবহার করতে পারেন

<div tabindex="-1"  id="tries"></div>

ট্যাবিনডেক্স মানটি কিছু আকর্ষণীয় আচরণের অনুমতি দিতে পারে।

যদি "-1" এর মান দেওয়া হয় তবে উপাদানটিতে ট্যাবড করা যায় না তবে প্রোগ্রামটিমেটিকভাবে (এলিমেন্ট.ফোকাস () ব্যবহার করে উপাদানটিকে ফোকাস দেওয়া যেতে পারে।
যদি 0 এর মান দেওয়া হয় তবে উপাদানটি কীবোর্ডের মাধ্যমে ফোকাস করতে পারে এবং নথির ট্যাব ফ্লোতে পড়ে। 0 এর চেয়ে বেশি মানগুলি 1 সবচেয়ে গুরুত্বপূর্ণ হিসাবে একটি অগ্রাধিকার স্তর তৈরি করে।

— সরথ আক
সূত্র

1

বাহ, ধন্যবাদ দুর্দান্ত কৌশল। ধন্যবাদ! আমি অন্যথায় এটি সন্ধান করতে হবে না।

— এভিপ্রোগ্রামার

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

— Cal

জীবন বাঁচান ক্রোম এবং ফায়ারফক্সের সাথে কাজ করে

— সুসমাপাথ

14

<div id="inner" tabindex="0">
    this div can now have focus and receive keyboard events
</div>

— আজাদ
সূত্র

এটি ক্রোমিয়াম / ক্রোম 46-এ কেবল আমার সাথে কাজ করে$('#inner').focus();

— টিএনটি

2

আমি মাইকেল শিম্মিনের মতো তবে উপাদানটির মতো হার্ডকোডিং বা সিএসএসের সাথে প্রয়োগ করা ছাড়াই কিছু প্রস্তাব দিতে চেয়েছিলাম।

আমি কেবল ক্লাস যুক্ত / অপসারণের জন্য jQuery ব্যবহার করছি, আপনি যদি jquery ব্যবহার করতে না চান তবে আপনার কেবল অ্যাড / রিমুভ ক্লাসের জন্য একটি প্রতিস্থাপন প্রয়োজন

--Javascript

function highlight(el, durationMs) { 
  el = $(el);
  el.addClass('highlighted');
  setTimeout(function() {
    el.removeClass('highlighted')
  }, durationMs || 1000);
}

highlight(document.getElementById('tries'));

--CSS

#tries {
    border: 1px solid gray;
}

#tries.highlighted {
    border: 3px solid red;
}

— জুয়ান মেন্ডেস
সূত্র

1

document.getElementById('test').onclick = function () {
    document.getElementById('scripted').focus();
};

div:focus {
    background-color: Aqua;
}

<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>

স্নিপেট প্রসারিত করুন

— সান জিং
সূত্র

0

সীমান্ত ফ্ল্যাশ করতে আপনি এটি করতে পারেন:

function focusTries() {
    document.getElementById('tries').style.border = 'solid 1px #ff0000;'
    setTimeout ( clearBorder(), 1000 );
}

function clearBorder() {
    document.getElementById('tries').style.border = '';
}

এটি 1 সেকেন্ডের জন্য সীমানাকে শক্ত লাল করবে এবং আবার এটি সরিয়ে ফেলবে।

— মাইকেল শিম্মিনস
সূত্র