यदि इनपुट पर ध्यान दिया जाए तो परीक्षण करने के लिए jQuery का उपयोग करना

Question

मैं जिस साइट का निर्माण कर रहा हूँ, उसके पहले पन्ने पर, कई लोग माउस के ऊपर से बॉर्डर जोड़ने के लिए <div>CSS :hoverछद्म वर्ग का उपयोग करते हैं। में से एक <div>एक होता है <form>जो, jQuery का उपयोग कर, सीमा रखेंगे अगर यह भीतर एक इनपुट ध्यान केंद्रित किया। यह पूरी तरह से काम करता है सिवाय इसके कि IE6 एस के अलावा :hoverकिसी भी तत्व पर समर्थन नहीं करता है <a>। इसलिए, इस ब्राउज़र के लिए केवल हम jQuery का उपयोग कर रहे हैं, CSS :hoverका उपयोग $(#element).hover()विधि की नकल करने के लिए कर रहे हैं । एकमात्र समस्या यह है कि अब, jQuery दोनों फॉर्म को संभालता है focus() और hover() , जब एक इनपुट फोकस होता है तो उपयोगकर्ता माउस को अंदर और बाहर ले जाता है, बॉर्डर चला जाता है।

मैं सोच रहा था कि हम इस व्यवहार को रोकने के लिए किसी प्रकार की सशर्त का उपयोग कर सकते हैं। उदाहरण के लिए, यदि हमने माउस पर परीक्षण किया है यदि किसी भी इनपुट पर ध्यान केंद्रित किया गया है, तो हम सीमा को दूर जाने से रोक सकते हैं। AFAIK, :focusjQuery में कोई चयनकर्ता नहीं है , इसलिए मुझे यकीन नहीं है कि यह कैसे होगा। कोई विचार?

Comments

क्या आप आवश्यक होने के कुछ वाक्यों को नीचे उबालने की कोशिश कर सकते हैं और मैं क्या कर रहा हूं?

— मकोरियाक

मुझे लगता है कि आपको फोकस और ब्लर ईवेंट्स ( docs.jquery.com/Events/focus और docs.jquery.com/Events/blur ) कैप्चर करने की आवश्यकता है

— वोल्फ

मैंने संबंधित प्रश्न पर एक जवाब पोस्ट किया है "क्या जावास्क्रिप्ट (या jQuery) में 'फोकस' है?" । मैंने बढ़ाया है [gnarf द्वारा उद्धृत cletus दृष्टिकोण] (# 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 );
};

यहाँ Mathias Bynens से उद्धृत :

ध्यान दें कि (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

इससे झूठी सकारात्मकता पैदा हो सकती है। देखें stackoverflow.com/questions/967096/... अधिक जानकारी (बेन Alman और डिएगो Perini करने के लिए धन्यवाद) के लिए।

— मथियास बिएनेंस

@ मैथियास ब्यनेंस - अपडेट के लिए धन्यवाद (आप इस समुदाय विकी उत्तर btw को संपादित करने के लिए स्वागत से अधिक हैं!)

— gnarf

जब आपको 1.5 और 1.6 दोनों के साथ काम करने की आवश्यकता होती है, तब क्या होगा? मैं jQuery के अपने फ़ोकस चयनकर्ता को ओवरराइड नहीं करना चाहता। कुछ पसंद है if (!jQuery.expr[':'].focus) { /* gist from Ben Alman */ }?

— बेटमोस

@betamos - बिल्कुल सही ... मैं उस उत्तर को दर्शाने के लिए कुछ जोड़ूंगा।

— गनरफ

@ एलेक्स - कृपया समस्या को दर्शाने वाले jsFiddle पर एक कम किया हुआ परीक्षण मामला प्रदान करें, क्योंकि जहां तक ​​मैं बता सकता हूं, कोई कारण नहीं है कि यह "गतिशील" तत्वों पर काम नहीं करना चाहिए । मैं

— शीनिगन्स कहता हूं

Answer 2

सीएसएस:

.focus {
    border-color:red;
}

JQuery:

  $(document).ready(function() {

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

Answer 3

वर्तमान में स्वीकृत एक से अधिक मजबूत उत्तर यहां दिया गया है:

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

ध्यान दें कि (elem.type || elem.href)परीक्षण झूठी सकारात्मक को फ़िल्टर करने के लिए जोड़ा गया था body। इस तरह, हम प्रपत्र नियंत्रण और हाइपरलिंक को छोड़कर सभी तत्वों को फ़िल्टर करना सुनिश्चित करते हैं।

( बेन जमान द्वारा इस सार से लिया गया ।)

Answer 4

अप्रैल 2015 अपडेट

चूँकि यह प्रश्न कुछ समय के लिए है, और कुछ नए सम्मेलन चलन में आए हैं, मुझे लगता है कि मुझे इस .liveविधि का उल्लेख करना चाहिए, जिसकी सराहना की गई है।

इसके स्थान पर, .onविधि अब पेश की गई है।

उनका प्रलेखन यह समझाने में काफी उपयोगी है कि यह कैसे काम करता है;

.On () विधि ईवेंट हैंडलर्स को वर्तमान में jQuery ऑब्जेक्ट में तत्वों के चयनित सेट में संलग्न करती है। JQuery 1.7 के रूप में, .on () विधि ईवेंट हैंडलर संलग्न करने के लिए आवश्यक सभी कार्यक्षमता प्रदान करता है। पुराने jQuery इवेंट विधियों से परिवर्तित करने में सहायता के लिए, .bind (), .delegate (), और .live () देखें।

इसलिए, 'इनपुट फ़ोकस' ईवेंट को लक्षित करने के लिए, आप इसका उपयोग स्क्रिप्ट में कर सकते हैं। कुछ इस तरह:

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

यह काफी मजबूत है और यहां तक ​​कि आप TAB कुंजी का भी उपयोग करने की अनुमति देता है।

Answer 5

मुझे पूरी तरह से यकीन नहीं है कि आप क्या कर रहे हैं, लेकिन यह लगता है कि यह इनपुट तत्वों (या div?) की स्थिति को एक चर के रूप में संग्रहीत करके प्राप्त किया जा सकता है:

$('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

यह वही है जो मैं कर रहा हूं, लेकिन मैंने एक वैश्विक जावास्क्रिप्ट चर के बजाय एक मनमानी सीएसएस वर्ग का उपयोग किया।

— ब्लौडरमिल्क

मैंने इसका एक रूपांतर किया। कोई नया 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

क्या आपने इसे अनुकरण करने के लिए माउसओवर और माउसओट का उपयोग करने के बारे में सोचा है । माउसइंटर और माउसलेव में भी देखें

Comments

यह अनिवार्य रूप से मैं jQuery के होवर के साथ कर रहा हूं। आप दो कार्यों की आपूर्ति करते हैं, एक माउस के लिए और दूसरा माउस के लिए।

— ब्लौडरमिल्क

Answer 9

सच्चे / झूठे झंडे के रूप में दोनों राज्यों (मँडरा, केंद्रित) पर नज़र रखें और जब भी कोई बदलता है, तो एक फ़ंक्शन चलाएं जो सीमा को हटा देता है यदि दोनों झूठे हैं, अन्यथा सीमा दिखाता है।

तो: onfocus सेट ध्यान केंद्रित = सच, onblur सेट ध्यान केंद्रित = गलत। ऑनमॉवरओवर सेट होवरेड = सच, ऑनमॉउसआउट सेट होवरेड = गलत। इन घटनाओं में से प्रत्येक के बाद एक समारोह चलता है जो सीमा को जोड़ता / हटाता है।

Answer 10

जहाँ तक मुझे पता है, आप ब्राउज़र से यह नहीं पूछ सकते कि क्या स्क्रीन पर किसी इनपुट पर फोकस है, आपको किसी तरह का फोकस ट्रैकिंग सेट करना होगा।

मेरे पास आमतौर पर "noFocus" नामक एक चर है और इसे सही पर सेट करें। फिर मैं सभी इनपुट्स पर फोकस इवेंट जोड़ता हूं जो कि नोफोकस को झूठा बनाता है। फिर मैं सभी इनपुट्स के लिए एक ब्लर ईवेंट जोड़ता हूं, जो noFocus को सही पर सेट करता है।

मेरे पास एक MooTools क्लास है जो इसे काफी आसानी से हैंडल करता है, मुझे यकीन है कि आप ऐसा करने के लिए एक jquery प्लगइन बना सकते हैं।

एक बार बनने के बाद, आप किसी भी बॉर्डर स्वैपिंग को करने से पहले noFocus चेक कर सकते हैं।

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

एक प्लगइन का उपयोग क्यों करें जब आप बस कोर jquery का उपयोग कर सकते हैं?

— मर्सी सटन

तुम सही हो। लेकिन मैं 2 साल पहले इस समस्या का हल नहीं जानता था।

— मुरात Murorlu

Answer 13

मेरे पास एक टेक्स्ट इनपुट की सामग्री को चुनने () (हाइलाइट) करने के लिए एक .live ("फ़ोकस") ईवेंट सेट था ताकि उपयोगकर्ता को नया मान टाइप करने से पहले इसका चयन न करना पड़े।

$ (FormObj) .Select ();

विभिन्न ब्राउज़रों के बीच झगड़े के कारण, चयन कभी-कभी उस क्लिक के कारण होता है जो इसे उत्पन्न करता है, और यह पाठ फ़ील्ड के भीतर कर्सर रखने के पक्ष में सामग्री को सही रूप से अचयनित करेगा (एफएफ में ज्यादातर ठीक काम किया लेकिन IE में विफल)

मैंने सोचा था कि मैं चयन पर थोड़ी देरी लगाकर इसे हल कर सकता हूं ...

setTimeout (function () {$ (formObj) .Select ();}, 200);

यह ठीक काम करता है और चयन जारी रहेगा, लेकिन एक अजीब समस्या उत्पन्न हुई .. यदि आप एक फ़ील्ड से दूसरे पर टैब करते हैं, तो चयन होने से पहले फ़ोकस अगले फ़ील्ड पर स्विच हो जाएगा। चूँकि चुराए गए फ़ोकस पर ध्यान दिया जाता है, फ़ोकस फिर वापस जाएगा और एक नए "फ़ोकस" ईवेंट को ट्रिगर करेगा। यह इनपुट के एक झरने में समाप्त हो गया स्क्रीन पर सभी नृत्य का चयन करता है।

एक व्यावहारिक समाधान यह जांचने के लिए होगा कि क्षेत्र अभी भी चयन को निष्पादित करने से पहले ध्यान केंद्रित करता है (), लेकिन जैसा कि उल्लेख किया गया है, जांचने का कोई सरल तरीका नहीं है ... मैंने पूरे ऑटो हाइलाइट के साथ बस वितरण को समाप्त कर दिया, बजाय कि क्या होना चाहिए एक एकल jQuery का चयन () सबरूटीन्स के साथ लादे गए एक बड़े समारोह में ...

Answer 14

मैं जो कर रहा हूं, वह एक मनमाना वर्ग बना रहा है, जिसे .elementhasfocus कहा जाता है, जिसे jQuery फोकस () फ़ंक्शन के भीतर जोड़ा और हटाया जाता है। जब होवर () फ़ंक्शन माउस से चलता है, तो यह .elementhasfocus के लिए जाँच करता है:

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

इसलिए यदि इसमें वह वर्ग नहीं है (पढ़ें: div के भीतर कोई तत्व फोकस नहीं है) तो सीमा हटा दी जाती है। नहीं तो कुछ नहीं होता।

Answer 15

सरल

 <input type="text" /> 



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

    alert("I am in Focus");

     });
 </script>

Comments

यह आपको नहीं बताता कि वर्तमान में कौन सा तत्व ध्यान में है। यह तब कहा जाता है जब किसी नए तत्व को फोकस मिलता है। इसलिए यदि किसी तत्व में पहले से ही फोकस है और आप जानना चाहते हैं कि क्या 'यह' एक है, तो यह कोड बेकार है।

— एलेक्सिस विल्के