f .ফোকাস () কাজ করছে না


153

JQuery এর মধ্যে সর্বশেষ উদাহরণ focus()ডকুমেন্টেশন রাজ্যের

$('#id').focus()

ইনপুট ফোকাস করা উচিত (সক্রিয়)। আমি এই কাজ পেতে বলে মনে হচ্ছে না।

এমনকি এই সাইটে কনসোলেও, আমি এটি অনুসন্ধান বাক্সের জন্য চেষ্টা করছি

$('input[name="q"]').focus()

এবং আমি কিছুই পাচ্ছি না। কোন ধারনা?


2
আপনি কি আমাদের আপনার কোড প্রদর্শন করতে পারেন?
আদিল

আমাদের আরও জানতে হবে, কারণ এটি আমার পক্ষে ভাল কাজ করে: jsfiddle.net/G7hwR/1 ডান প্যানেলে যে কোনও জায়গায় ক্লিক করুন এবং এটি ফোকাস করেছে ...
রব জি

এই পৃষ্ঠায় ফোকাস করা উচিত নয়, যদিও? আমি সরবরাহ করা স্নিপেট?
স্যাম সেলিকফ

এটি এর মধ্যে যা রয়েছে তার উপর নির্ভর করে; যদি এটি কোনও কিছুর ভিতরে না থাকে তবে সম্ভবত এটি পৃষ্ঠাটি রেন্ডার হওয়ার আগেই চালানো হবে ...
রব জি

এখানে অনুসন্ধান থেকে যারা আসছেন তাদের জন্য: বিকাশকারী সরঞ্জামগুলিতে অন্তর্ভুক্ত ব্রাউজারটি focus()ফানসিওনালিটির সাথে হস্তক্ষেপ করতে পারে । আরও তথ্য
অ্যাক্সেল

উত্তর:


391

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

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

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


1
গ্রেট! এটি কি আপনার উভয় সমস্যার সাথে সহায়তা করেছে? যদি তা হয় তবে আপনি কি এটি সঠিক উত্তর হিসাবে চিহ্নিত করতে পারেন? আমি এটির অনেক প্রশংসা করব: ডি
জাস্টিন ওয়ার্কেন্টিন

4
বা না কাজ; ডেভেলপার টুলস ব্যবহার করবেন না যখন শুধুমাত্র ব্যবহার $ ( 'INPUT [NAME = "Q"]') ফোকাস ()।
অমিতাভ

12
বাহ, আমি কয়েক মাস ধরে এটি নিয়ে লড়াই চালিয়ে যাচ্ছিলাম, কেবলমাত্র দেখলাম যে এটি বিকাশকারী কনসোলটি খোলার কারণে ঘটে। আমার সর্বদা হয়। ধন্যবাদ!
অ্যালেক্স টারপিন

20
"আপনি ডিওমের সাথে সংযুক্ত না থাকা কোনও উপাদানটির উপরে ফোকাস () কল করতে পারবেন না for" এছাড়াও, মনে হয় আপনি এটি লুকানো উপাদানগুলিতে কল করতে পারবেন না।
tandrewnichols

1
setTimeoutক্রিয়াকলাপ সমস্যার ক্রম সমাধানের জন্য ব্যবহার করা এটি বজায় রাখার প্যাটুটিতে একটি বিশাল ব্যথা করে। কোনও বাগ প্রদর্শিত হলে এটি ডিবাগ করা সত্যিই শক্ত। আপনি যেখানেই ডিওমে এলিমেন্টটি .োকাচ্ছেন, .focus()সেখানে কল করা উচিত ।
কেভিন বিয়াল 21

55

নেটে অন্য কোথাও একটি সমাধান খুঁজে পেয়েছে ...

$('#id').focus();

এটা কাজ করছে না.

$('#id').get(0).focus();

কাজ করেছে।


4
আমি এই সমাধানটিকে কেবলমাত্র উত্সাহিত করেছি কারণ এই পৃষ্ঠায় আরও জনপ্রিয় সমাধানটি যখন দেয় না তখন এটি আমার পক্ষে কাজ করে। ;-)
chriv

দ্বিতীয় বিকল্পটি কেবল ডোম উপাদানটি ধরেছে এবং jquery সংস্করণের পরিবর্তে নিয়মিত জাভাস্ক্রিপ্ট সংস্করণ ব্যবহার করছে বলে মনে হচ্ছে।
danielson317

7
এটি কি আপনার পৃষ্ঠায় "আইডি" আইডি সহ একাধিক উপাদান থাকতে পারে? DOM এই ক্ষেত্রে ভাঙবে না তবে আপনি একাধিক উপাদানগুলিতে ফোকাস বরাদ্দ করতে পারবেন না
DerpyNerd

আমি দেখতে পেলাম যে 0 টি বিলম্বের সাথে একটি উইন্ডো.সেটটাইমআউট দিয়ে আমার এটি করতে হয়েছিল, এবং তারপরে সব ঠিক আছে। ধন্যবাদ। আমি চেষ্টা করেছিলাম এমন সমস্ত কিছুই বুটস্ট্র্যাপ মডেলে ব্যর্থ হয়েছে।
ওয়েড হ্যাটার

23

এখানে কিছু উত্তর setTimeoutলক্ষ্য উপাদানটির দিকে মনোনিবেশ করার প্রক্রিয়াটি বিলম্ব করতে ব্যবহার করার পরামর্শ দেয় । তাদের মধ্যে একটি উল্লেখ করেছে যে লক্ষ্যটি একটি মোডাল সংলাপের অভ্যন্তরে। setTimeoutসমাধানটি কোথায় ব্যবহৃত হয়েছিল তার সুনির্দিষ্ট বিবরণ না জেনে সমাধানের সঠিকতার বিষয়ে আমি আরও মন্তব্য করতে পারি না । যাইহোক, আমি ভেবেছিলাম যে এই থ্রেডটিতে ছড়িয়ে পড়ে এমন লোকদের আমার মতো করে সহায়তা করতে আমার এখানে একটি উত্তর সরবরাহ করা উচিত

বিষয়টির সরল সত্যটি হ'ল আপনি এমন কোনও উপাদানের দিকে ফোকাস করতে পারবেন না যা এখনও দৃশ্যমান নয় । আপনি যদি এই সমস্যায় পড়ে থাকেন তবে লক্ষ্য রাখার চেষ্টা করা হলে লক্ষ্যটি বাস্তবে দৃশ্যমান তা নিশ্চিত হয়ে নিন। আমার নিজের ক্ষেত্রে আমি এই লাইনের সাথে কিছু করছি something

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

এটি কার্যকর হয়নি। আমি কেবল তখনই বুঝতে পেরেছিলাম যখন আমি exec ('# elementid') সম্পাদন করি তখন কী ঘটছে focus ফোকাস () the যে কনসোলটি কাজ করেছিল তা থেকে । পার্থক্য - লক্ষ্যটির উপরে আমার কোডে কোনও নিশ্চিততা নেই যে অ্যানিমেশনটি সম্পূর্ণ না হওয়ায় লক্ষ্যটি দৃশ্যমান হবে । এবং সেখানে ক্লু আছে

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

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


আমার জন্য প্রাসঙ্গিক ইঙ্গিতটি ছিল "লক্ষ্যটি বাস্তবে দৃশ্যমান কিনা তা নিশ্চিত করা"। শর্তাধীন রেন্ডার উপাদানগুলিতে ফোকাস করার চেষ্টা করার সময় এটি প্রাসঙ্গিক হয়ে ওঠে।
চার্লি কার্ভার

বা যখন ফোকাস করার উপাদান রয়েছে visibility:hidden- এটি ফোকাস হবে না।
বেকরুল

`আপনি এমন কোনও উপাদানের দিকে মনোযোগ দিতে পারবেন না যা এখনও দৃশ্যমান নয়` - আমি আপনাকে ভালবাসি। কেবলমাত্র 100 মিমি সময়সীমা যুক্ত করে আমি আমার লুকানো অনুসন্ধান বাক্সে ফোকাসটি ট্রিগার করতে পারি। ধন্যবাদ!
লুব্রে

সময়সীমা সম্পর্কে সতর্ক থাকুন। আপনার বিকাশ মেশিনে যা কাজ করে তা অন্য একটিতে কাজ নাও করতে পারে।
DroidOS

15

আপনি যদি বুটস্ট্র্যাপ + মডেল ব্যবহার করেন তবে এটি আমার পক্ষে কাজ করেছে:

  $(myModal).modal('toggle');
  $(myModal).on('shown.bs.modal', function() {
    $('#modalSearchBox').focus()
  });

8

এই প্রশ্নটি পেরিয়ে অন্য কেউ যদি হোঁচট খায় এবং আমারও একই অবস্থা হয়েছিল - আমি অন্য উপাদানটিতে ক্লিক করার পরে ফোকাসটি সেট করার চেষ্টা করছিলাম, তবুও ফোকাসটি কাজ করে না বলে মনে হচ্ছে। দেখা যাচ্ছে যে আমার কেবল একটি দরকার ছিল e.preventDefault();- এখানে একটি উদাহরণ রয়েছে:

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

এটি সাহায্য করেছে:

আপনি যদি একটি মোসডাউন ইভেন্ট হ্যান্ডলার থেকে HTMLElement.focus () কল করেন তবে HTMLElement ছাড়ার থেকে ফোকাস রাখতে আপনাকে অবশ্যই ইভেন্ট.প্রিভেন্টডেফল্ট () কল করতে হবে। সূত্র: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/focus


2
একটাই কাজ! ট্রিগার হ'ল একটি পপআপ ডিভ, ক্লিক করে ডিভটি লুকায় এবং একটি পাঠ্য বাক্সে কিছু মান রাখে (একটিকে ফোকাস করার প্রয়োজন হয় না)। ডিফল্ট ছাড়াই, সেই পাঠ্য বাক্সটি সবসময়ই কেন্দ্রীভূত থাকে
___

4

আমি বুঝতে পারি যে এটি পুরানো, তবে এটি আজই এসে গেছে। কোনও উত্তর আমার পক্ষে কাজ করেনি, আমি যা খুঁজে পেয়েছি তা সেটটাইমআউট। আমি চেয়েছিলাম যে আমার ফোকাসটি একটি মডালের ফাইল করা ইনপুটটিতে সেটটাইমআউট কাজ করে ব্যবহার করা উচিত। আশাকরি এটা সাহায্য করবে!


আমিও! এবং সময়সীমাটির দৈর্ঘ্য সত্যিই একটি পার্থক্য করেছে। বোকা আইই।
agগলই

1
তবে এটি মোবাইল ডিভাইসে কাজ করছে না। মোবাইল ব্রাউজারগুলি বেশিরভাগ ক্ষেত্রে সেটটাইমআউটের ভিতরে থাকা সমস্ত কিছুকে উপেক্ষা করছে
কোসমনফ্যাট

1
থাম্বের নিয়ম হিসাবে, ব্যবহার setTimeoutকরা একটি খারাপ সমাধান। আপনি ব্যবহারকারীর মেশিনে মৃত্যুদন্ড কার্যকর করার গ্যারান্টি দিতে পারবেন না, তাই সময়-নির্ভর জিনিসগুলি অত্যন্ত ভঙ্গুর।
নাথান

3

আমারও এই সমস্যা ছিল আমার ক্ষেত্রে যে সমাধানটি কাজ করেছিল তা হ'ল এইচটিএমএল উপাদানটিতে ট্যাবিনডেক্স বৈশিষ্ট্যটি ব্যবহার করা হয়েছিল।

আমি ব্যবহার করছিলাম ng-repeat একটি লিস্টের মধ্যে কিছু লি উপাদানগুলির জন্য করছিলাম এবং আমি .ফোকাস () ব্যবহার করে প্রথম লিটিতে ফোকাস আনতে সক্ষম হইনি, তাই আমি লুপের সময় কেবল প্রতিটি লিটিতে ট্যাবিনডেক্স বৈশিষ্ট্য যুক্ত করেছিলাম।

তাই এখন <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

সেই +1 সূচকটি 0 থেকে শুরু হয়েছিল Also এছাড়াও ফোকাস () ফাংশনটি কল করার আগে উপাদানটি ডিওমে উপস্থিত রয়েছে তা নিশ্চিত করুন

আশা করি এটা কাজে লাগবে.


2

তাদের কাজ না করার সমস্যা রয়েছে কারণ আপনি "$ (উপাদান)। শো ()" ব্যবহার করেছেন। আমি এটি পরবর্তী উপায়ে সমাধান করেছি:

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

সুতরাং আপনার একটি টাইমার দরকার নেই, শো পদ্ধতিটি শেষ হওয়ার পরে এটি কার্যকর হবে।


এই অন্য কোন রূপান্তরটি প্রযোজ্য slideDown(), fadeIn()ইত্যাদি
আলভারো গোনজালেজ

2

ফোকাস () এর আগে একটি বিলম্ব যুক্ত করুন। 200 এমএস যথেষ্ট

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

0

এই মুহূর্তে আবার এই সমস্যাটি ছিল, এবং বিশ্বাস করুন বা না করুন, আমাকে যা করতে হয়েছিল তা হ'ল বিকাশকারী সরঞ্জামগুলি বন্ধ করা। স্পষ্টতই কনসোল ট্যাবটির পৃষ্ঠার সামগ্রীতে ফোকাস অগ্রাধিকার রয়েছে।


0

উপাদান এবং এর পিতামাতা দৃশ্যমান তা নিশ্চিত করুন। আপনি লুকানো উপাদানগুলিতে ফোকাস ব্যবহার করতে পারবেন না


-1

অ্যাডিশনাল সলিউশন একই সমস্যা ছিল যেখানে ফোকাস () কাজ করে বলে মনে হচ্ছে না তবে শেষ পর্যন্ত প্রমাণিত হয়েছে যে যা প্রয়োজন ছিল তা সঠিক অবস্থানে স্ক্রোল করছে:


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