কোনও ইনপুটটিতে ফোকাস রয়েছে কিনা তা পরীক্ষা করতে jQuery ব্যবহার করা

Question

যে সাইটটি আমি তৈরি করছি তার প্রথম পৃষ্ঠায়, মাউস যখন তাদের উপর চলে আসে তখন বেশ কয়েকটি <div>এসএসএস :hoverসিউডো-ক্লাস ব্যবহার করে border এক <div>করা একটি রয়েছে <form>যার jQuery ব্যবহার, সীমান্ত রাখা হবে যদি এটি মধ্যে একটি ইনপুট ফোকাস হয়েছে। আইই 6 এস :hoverব্যতীত অন্য কোনও উপাদানগুলিতে সমর্থন করে না তা বাদ দিয়ে এটি পুরোপুরি কাজ করে <a>। সুতরাং, শুধুমাত্র এই ব্রাউজারের জন্য আমরা পদ্ধতিটি :hoverব্যবহার করে সিএসএসের নকল করতে jQuery ব্যবহার করছি $(#element).hover()। কেবলমাত্র সমস্যাটি হ'ল, এখন jQuery উভয় ফর্ম পরিচালনা করে focus() এবং hover() যখন কোনও ইনপুট ফোকাস করে তখন ব্যবহারকারী মাউসটিকে ভেতরে এবং বাইরে সরিয়ে দেয়, সীমাটি চলে যায়।

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

Comments

আপনি কী প্রয়োজন তা কয়েকটি বাক্যে সেটিকে সিদ্ধ করার চেষ্টা করতে পারেন এবং আমি কী ঘটছি?

— mkoryak

আমার মনে হয় আপনার ফোকাসটি ক্যাপচার এবং ব্লার ইভেন্টগুলিতে নজর দেওয়া উচিত ( ডকস.জেকুয়ারি / এজেন্টস / ফোকাস এবং ডকস.জেকুয়ারী / এজেন্টস / ব্লুর )

— ওল্ফার

আমি সম্পর্কিত প্রশ্নে একটি উত্তর পোস্ট করেছি "জাভাস্ক্রিপ্টে (বা jQuery) এর কোনও 'ফোকাস' রয়েছে?" । আমি [gnarf দ্বারা উদ্ধৃত ক্লিটাস পদ্ধতির] উন্নত করেছি (# 2684561)।

— লুইগিতাম

Answer 1

jQuery 1.6+

jQuery একটি :focusনির্বাচক যুক্ত করেছে যাতে আমাদের আর এটি নিজেরাই যুক্ত করার দরকার নেই। শুধু ব্যবহার$("..").is(":focus")

jQuery 1.5 এবং নীচে

সম্পাদনা: সময় পরিবর্তনের সাথে সাথে আমরা পরীক্ষার ফোকাসের আরও ভাল পদ্ধতিগুলি খুঁজে পাই, নতুন প্রিয় হ'ল বেন আলমানের এই বক্তব্য :

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

ম্যাথিয়াস বেনেন্স থেকে উদ্ধৃত এখানে :

নোট করুন যে (elem.type || elem.href)পরীক্ষাটি শরীরের মতো মিথ্যা ধনাত্মককে ফিল্টার করার জন্য যুক্ত করা হয়েছিল। এইভাবে, আমরা ফর্ম নিয়ন্ত্রণ এবং হাইপারলিঙ্কগুলি বাদে সমস্ত উপাদান ফিল্টার আউট করা নিশ্চিত করি।

আপনি একজন নতুন নির্বাচককে সংজ্ঞায়িত করছেন। দেখুন প্লাগইন / অথারিং । তারপরে আপনি এটি করতে পারেন:

if ($("...").is(":focus")) {
  ...
}

বা:

$("input:focus").doStuff();

কোন jQuery

যদি আপনি কেবল কোন উপাদানটির ফোকাস রয়েছে তা নির্ধারণ করতে চান তবে আপনি ব্যবহার করতে পারেন

$(document.activeElement)

সংস্করণটি 1.6 বা তার চেয়ে কম হবে কিনা আপনি যদি নিশ্চিত না হন তবে আপনি :focusযদি নির্বাচকটি অনুপস্থিত থাকে তবে এটি যোগ করতে পারেন :

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
        };
    }
})( jQuery );

Comments

এটি মিথ্যা ইতিবাচক কারণ হতে পারে। আরও তথ্যের জন্য স্ট্যাকওভারফ্লো.com/ জিজ্ঞাসা / 669০৯//২ দেখুন (বেন আলমান এবং দিয়েগো পেরিনিকে ধন্যবাদ)

— ম্যাথিয়াস বাইনেস

@ ম্যাথিয়াস ব্যেনেন্স - আপডেটের জন্য ধন্যবাদ (আপনি এই সম্প্রদায়ের উইকি উত্তর

— বিটিডব্লিউ

1.5- এবং 1.6 উভয়ের সাথে কাজ করার জন্য আপনার কী প্রয়োজন? আমি jQuery এর নিজস্ব ফোকাস নির্বাচককে ওভাররাইড করতে চাই না। এরকম কিছু if (!jQuery.expr[':'].focus) { /* gist from Ben Alman */ }?

— বেটামোস

@ বিটামোস - ঠিক ঠিক ... আমি এর প্রতিফলনের জন্য উত্তরে কিছু যুক্ত করব।

— gnarf

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

— শেনিনিগানকে

Answer 2

সিএসএস:

.focus {
    border-color:red;
}

jQuery:

  $(document).ready(function() {

    $('input').blur(function() {
        $('input').removeClass("focus");
      })
      .focus(function() {
        $(this).addClass("focus")
      });
  });

Answer 3

এখানে বর্তমানে গৃহীত উত্তরগুলির চেয়ে আরও দৃ answer় উত্তর:

jQuery.expr[':'].focus = function(elem) {
  return elem === document.activeElement && (elem.type || elem.href);
};

নোট করুন যে (elem.type || elem.href)পরীক্ষাটি মিথ্যা ইতিবাচক মতগুলি ফিল্টার করতে যুক্ত করা হয়েছিল body। এইভাবে, আমরা ফর্ম নিয়ন্ত্রণ এবং হাইপারলিঙ্কগুলি বাদে সমস্ত উপাদান ফিল্টার আউট করা নিশ্চিত করি।

(থেকে নেওয়া এই সারকথা দ্বারা বেন Alman ।)

Answer 4

এপ্রিল 2015 আপডেট

যেহেতু এই প্রশ্নটি প্রায় সময় হয়েছে, এবং কয়েকটি নতুন সম্মেলন কার্যকর হয়েছে, আমি অনুভব করি যে .liveপদ্ধতিটি অবমূল্যায়ন করা হয়েছে আমার উল্লেখ করা উচিত ।

তার জায়গায়, .onপদ্ধতিটি এখন চালু করা হয়েছে।

তাদের ডকুমেন্টেশন এটি কীভাবে কাজ করে তা বোঝাতে বেশ কার্যকর;

.On () পদ্ধতিটি jQuery অবজেক্টে বিদ্যমান নির্বাচিত উপাদানগুলির সেট ইভেন্ট হ্যান্ডলারগুলিকে সংযুক্ত করে। JQuery 1.7 হিসাবে, .on () পদ্ধতি ইভেন্ট হ্যান্ডলার সংযুক্ত করার জন্য প্রয়োজনীয় সমস্ত কার্যকারিতা সরবরাহ করে। পুরানো jQuery ইভেন্ট পদ্ধতি থেকে রূপান্তর করতে সহায়তার জন্য .bind (), .delegate () এবং .live () দেখুন।

সুতরাং, আপনাকে 'ইনপুট ফোকাসড' ইভেন্টটি লক্ষ্য করার জন্য, আপনি এটি কোনও স্ক্রিপ্টে ব্যবহার করতে পারেন। কিছুটা এইরকম:

$('input').on("focus", function(){
   //do some stuff
});

এটি বেশ শক্তিশালী এবং এমনকি আপনাকে ট্যাব কীটিও ব্যবহার করতে দেয়।

Answer 5

আপনি কী পরে যাচ্ছেন তা সম্পর্কে আমি পুরোপুরি নিশ্চিত নই তবে এই শব্দগুলির মতো শোনা যাচ্ছে যে ইনপুট উপাদানগুলির (বা ডিভ?) একটি ভেরিয়েবল হিসাবে স্টোর করে এটি অর্জন করা যেতে পারে:

$('div').each(function(){

    var childInputHasFocus = false;

    $(this).hover(function(){
        if (childInputHasFocus) {
            // do something
        } else { }
    }, function() {
        if (childInputHasFocus) {
            // do something
        } else { }
    });

    $('input', this)
        .focus(function(){
            childInputHasFocus = true;
        })
        .blur(function(){
            childInputHasFocus = false;
        });
});

Comments

এটিই আমি ক্ষতবিক্ষত করেছিলাম, তবে আমি একটি বিশ্বব্যাপী জাভাস্ক্রিপ্ট পরিবর্তনের পরিবর্তে একটি স্বেচ্ছাসেবী সিএসএস ক্লাস ব্যবহার করেছি।

— bloudermilk

আমি এর একটি প্রকরণ ব্যবহার করেছি। কোন নতুন jQuery প্লাগইন প্রয়োজন। এটি আমাকে একটি খুশি শিবির করে তোলে!

— ডেনিস ডে

Answer 6

কোনও উপাদানের অবস্থা চিহ্নিত করতে শ্রেণি ব্যবহারের বিকল্প হ'ল অভ্যন্তরীণ ডেটা স্টোর কার্যকারিতা ।

পিএস: আপনি বুলিয়ানগুলি এবং data()ফাংশনটি ব্যবহার করে যা ইচ্ছা তা সঞ্চয় করতে সক্ষম । এটি কেবল স্ট্রিং সম্পর্কে নয় :)

$("...").mouseover(function ()
{
    // store state on element
}).mouseout(function ()
{
    // remove stored state on element
});

এবং তারপরে এটি উপাদানগুলির অ্যাক্সেসের বিষয়টি মাত্র।

Answer 7

যদি কেউ যত্ন করে তবে এখন ফোকাস ক্যাপচার করার আরও অনেক ভাল উপায় আছে, $(foo).focus(...)

http://api.jquery.com/focus/

Answer 8

আপনি এটি অনুকরণ করতে মাউসওভার এবং মাউসআউট ব্যবহার সম্পর্কে ভেবে দেখেছেন ? এছাড়াও দেখব mouseEnter এবং mouseLeave

Comments

মূলত আমি jQuery এর হোভারটি দিয়ে যা করছি। আপনি দুটি ফাংশন সরবরাহ করেন, একটি মাউস ইন এবং একটি মাউস আউট জন্য।

— bloudermilk

Answer 9

উভয় রাজ্যের ট্র্যাক রাখুন (আটকানো, ফোকাসড) সত্য / মিথ্যা পতাকা হিসাবে এবং যে কোনও পরিবর্তন হলে, একটি ফাংশন চালান যা উভয় মিথ্যা হলে বর্ডার সরিয়ে দেয়, অন্যথায় সীমানা দেখায়।

সুতরাং: অনফোকস সেটগুলি ফোকাসড = ট্রু, অনব্লুর সেট ফোকাসড = ভুয়া। onmouseover set h hd = true, onmouseout set h hd = false। এই ইভেন্টগুলির প্রত্যেকের পরে একটি ফাংশন সঞ্চালিত হয় যা সীমানা যুক্ত করে / সরিয়ে দেয়।

Answer 10

আমি যতদূর জানি, আপনি যদি স্ক্রিনের কোনও ইনপুটটিতে ফোকাস থাকে তবে আপনি ব্রাউজারটিকে জিজ্ঞাসা করতে পারবেন না, আপনাকে কোনও ধরণের ফোকাস ট্র্যাকিং সেটআপ করতে হবে।

আমার কাছে সাধারণত "নোফোকাস" নামে একটি পরিবর্তনশীল থাকে এবং এটি সত্য হিসাবে সেট করে। তারপরে আমি সমস্ত ইনপুটগুলিতে একটি ফোকাস ইভেন্ট যুক্ত করব যা কোনও ফোকাসকে মিথ্যা করে। তারপরে আমি সমস্ত ইনপুটগুলিতে একটি অস্পষ্ট ইভেন্ট যুক্ত করব যা নোফোকাসকে সত্যে ফিরে আসে।

আমার কাছে একটি MooTools ক্লাস রয়েছে যা এটি খুব সহজেই পরিচালনা করে, আমি নিশ্চিত আপনি এটি করতে একটি jquery প্লাগইন তৈরি করতে পারেন।

এটি তৈরি হয়ে গেলে, কোনও সীমান্ত অদলবদল করার আগে আপনি নোফোকাস চেক করতে পারেন।

Answer 11

এখানে নেই: ফোকাস, তবে রয়েছে: নির্বাচিত http://docs.jquery.com/Selectors/selected

তবে আপনি যদি যা চয়ন করেন তার উপর ভিত্তি করে জিনিসগুলি কীভাবে চেহারা পরিবর্তন করতে চান তবে আপনার সম্ভবত অস্পষ্ট ইভেন্টগুলির সাথে কাজ করা উচিত।

http://docs.jquery.com/Events/blur

Answer 12

কোনও উপাদান ফোকাস করছে কিনা তা পরীক্ষা করার জন্য একটি প্লাগইন রয়েছে: http://plugins.jquery.com/project/focused

$('input').each(function(){
   if ($(this) == $.focused()) {
      $(this).addClass('focused');
   }
})

Comments

আপনি যখন কেবল জিকোয়ারি ব্যবহার করতে পারেন তখন কেন একটি প্লাগিন ব্যবহার করবেন?

— মারসি সাটন

তুমি ঠিক. তবে আমি 2 বছর আগে এই সমস্যার কোনও সমাধান জানতাম না।

— মুরাত ওরলু

Answer 13

আমার কাছে একটি পাঠ্য ইনপুটগুলির বিষয়বস্তুগুলি () (হাইলাইট করা) নির্বাচন করতে একটি লাইভ ("ফোকাস") ইভেন্ট ছিল যাতে ব্যবহারকারী কোনও নতুন মান টাইপ করার আগে এটি নির্বাচন না করে।

$ (FormObj) .select ();

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

আমি ভেবেছিলাম নির্বাচনের ক্ষেত্রে কিছুটা বিলম্ব রেখে আমি এটিকে সমাধান করতে পারি ...

setTimeout (ফাংশন () {$ (formObj) .select ();}, 200);

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

একটি কার্যক্ষম সমাধান হ'ল নির্বাচন () নির্বাচন করার আগে ক্ষেত্রটি এখনও ফোকাস করেছে কিনা তা যাচাই করা হবে, তবে যেমনটি উল্লেখ করা হয়েছে, চেক করার কোনও সহজ উপায় নেই ... আমি কীটি হওয়া উচিত তা পরিবর্তনের পরিবর্তে পুরো অটো হাইলাইটটি দিয়েই বিতরণ করেছি I একটি একক jQuery নির্বাচন () subroutines দিয়ে বোঝা একটি বিশাল ফাংশন কল ...

Answer 14

আমি যা করেছিলাম তা হ'ল .elementhasfocus নামে একটি স্বেচ্ছাসেবক শ্রেণি তৈরি করা যা jQuery ফোকাস () ফাংশনের মধ্যে যুক্ত এবং সরানো হয়। যখন হোভার () ফাংশনটি মাউস আউট হয়ে যায় তখন এটি .elementhasfocus পরীক্ষা করে:

if(!$("#quotebox").is(".boxhasfocus")) $(this).removeClass("box_border");

সুতরাং যদি এটির শ্রেণি না থাকে (পড়ুন: ডিভের মধ্যে কোনও উপাদানের ফোকাস নেই) সীমানা সরানো হবে। তা না হলে কিছুই হয় না।

Answer 15

সহজ

 <input type="text" /> 



 <script>
     $("input").focusin(function() {

    alert("I am in Focus");

     });
 </script>

Comments

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

— অ্যালেক্সিস উইলক