सवाल जावास्क्रिप्ट (या jQuery) में कोई 'फोकस' है?


क्या ऐसा कुछ है जो मैं ऐसा कर सकता हूं (एक प्लगइन के माध्यम से perhap)

if ( ! $('form#contact input]').hasFocus()) {
  $('form#contact input:first]').focus();
}

असल में, पहले इनपुट पर ध्यान केंद्रित करें, लेकिन केवल तभी जब उपयोगकर्ता पहले से ही कुछ भी क्लिक नहीं कर पाया है?

मुझे पता है कि यह भी काम करेगा, लेकिन क्या कुछ और सुरुचिपूर्ण है?

$(function() {
  var focused = false;
  $('form#contact input]').focus(function() {
    focused = true;
  }); 
  setTimeout(function() {
    if ( ! focused) {      
      $('form#contact input:first]').focus();
    }
  }, 500);
});

44
2018-04-21 14:23


मूल




जवाब:


कोई मूल समाधान नहीं है लेकिन हां एक और शानदार तरीका है जिसे आप कर सकते हैं:

jQuery.extend(jQuery.expr[':'], {
  focus: "a == document.activeElement"
});

आप एक नया चयनकर्ता परिभाषित कर रहे हैं। देख प्लगइन्स / संलेखन। फिर आप कर सकते हैं:

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

या:

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

62
2018-04-21 14:32



यह कूलस है, कभी कस्टम चयनकर्ता के बारे में नहीं! - alex
शायद आपको इसे jQuery के नए संस्करणों के लिए जमा करना चाहिए, यह उपयोगी होगा। - gnarf
कोई विचार क्यों jQuery.expr का उपयोग करता है == बजाय ===? - Matt Ball
इससे झूठी सकारात्मक हो सकती है। देख stackoverflow.com/questions/967096/... अधिक जानकारी और एक साधारण फिक्स के लिए (बेन आलमैन और डिएगो पेरिनी के लिए धन्यवाद)। - Mathias Bynens
जैसा कि दूसरों द्वारा उल्लिखित है jquery अब मूल रूप से इसका समर्थन करता है: फोकस api.jquery.com/focus-selector - Simon_Weaver


$('input:focus')

यह सीएसएस है। आपको "कस्टम चयनकर्ता" बनाने की आवश्यकता नहीं है। यह पहले से मौजूद है! http://www.w3schools.com/CSS/pr_pseudo_focus.asp

उस चयनकर्ता को आप जो भी प्रक्रिया करना चाहते हैं उसे संलग्न करें, और यदि प्रश्न में तत्व केंद्रित नहीं है तो यह इसे बाहर कर देगा। मैंने हाल ही में इसे रखने के लिए किया था keyup ईमेल इनपुट त्रुटि को तुरंत चालू करने से जांचें कि ई-मेल इनपुट का उपयोग नहीं किया जा रहा था।

यदि आप जो करने की कोशिश कर रहे हैं, यह जांच कर लें कि क्या उपयोगकर्ता ने स्वयं कुछ भी ध्यान केंद्रित किया है, बस यह करें:

if($('input:focus').size() == 0){
    /* Perform your function! */
}

26
2018-04-21 14:38



तुम गलत हो। jQuery, सीएसएस के विपरीत, नहीं है :focus या :hover चयनकर्ताओं। - SLaks
ऐसा लगता है कि यह वास्तव में करता है: jsfiddle.net/vnYCK - Matt
jQuery सीएसएस चयनकर्ताओं का उपयोग करता है। अगर यह सीएसएस में काम करता है, तो यह जेक्यू में काम करता है। मुझ पर विश्वास करो। यदि आपको कोई संदेह है, तो इस पृष्ठ में फॉर्म आज़माएं और फिर जेएस का निरीक्षण करें: ddrewdesign.com/contact ट्रिगर कोड लाइन 124 पर है। मैंने कोशिश नहीं की है :hover हालांकि, इससे पहले कि मैं इसके लिए बात नहीं कर सकता। यह चाल जेएस को लेगवर्क करने के लिए मिल रही है, इसलिए यह जांचने में सक्षम है, इसलिए आपको इसे किसी प्रकार की कार्रवाई के अंदर रखना होगा। - dclowd9901
यह आईई 7 में काम नहीं करता है। - SLaks
कोई भी इन सभी उत्तरों को बिना किसी स्पष्ट रूप से स्पष्ट कारण के लिए चला गया और नीचे चला गया, इसलिए मेरे लिए +1 से काउंटर - cletus


jQuery 1.6 अब एक समर्पित है :focus चयनकर्ता।


11
2018-05-10 12:59





मुझे स्ट्रिंग के कारण jQuery 1.3.2 और फ़ायरफ़ॉक्स 3.6.8 का उपयोग करके क्लीटस दृष्टिकोण में परेशानी थी "a == document.activeElement" वैध कार्य नहीं था।

मैंने इसे एक समारोह को परिभाषित करने के लिए तय किया focus कुंजी। वास्तव में, सभी अन्य कुंजी में परिभाषित किया गया jQuery.expr[':'] कार्यों के रूप में परिभाषित किया जाता है। यहां कोड है:

jQuery.extend(jQuery.expr[':'], {
    focus: function(e){ return e == document.activeElement; }
});

तो, अब यह उम्मीद के अनुसार काम करता है।

हालांकि, मैं फ़ायरफ़ॉक्स 3.6.8 में कुछ अजीब व्यवहार का अनुभव कर रहा था (शायद एफएफ में एक बग?)। यदि पृष्ठ प्रतिपादन करते समय मैंने इनपुट टेक्स्ट पर क्लिक किया, और यदि मैंने फोन किया is(":focus") पेज लोड पर, मुझे फ़ायरबग द्वारा रिपोर्ट की गई ब्राउज़र से एक त्रुटि मिलेगी, और स्क्रिप्ट टूट जाएगी।

इसे हल करने के लिए, मैंने कोड को एक से घिराया try...catch ब्लॉक, लौट रहा है false त्रुटि पर यदि आप अपने उपयोगकर्ताओं को एक ही त्रुटि का सामना करने से रोकना चाहते हैं तो इसका उपयोग करें:

jQuery.extend(jQuery.expr[':'], {
    focus: function(e){
        try{ return e == document.activeElement; }
        catch(err){ return false; }
    }
});

9
2017-08-13 15:32





नहीं, वहाँ नहीं है।

हालांकि, आप इसे इस तरह अनुकरण कर सकते हैं:

$(':input')
    .data('focused', false)
    .focus(function() { $.data(this, 'focused', true); })
    .blur(function() { $.data(this, 'focused', false); });

7
2018-04-21 14:26



यह क्यों गिराया गया था? - SLaks
सभी जवाब विन्सेंट को छोड़कर थे (उन पर क्लिक करें)। मैं उन सभी का सामना करने के लिए उन्हें +1 कर रहा हूं। - cletus
डाउनवॉट्स के बारे में नहीं जानते। शायद उन्होंने ऐसा किया जब आपका जवाब केवल पहली पंक्ति थी। वैसे भी, मैंने आपको एक +1 दिया :) - alex
नहीं, उन्होंने नहीं किया। - SLaks
ध्यान दें कि आप इसका उपयोग कर सकते हैं $(this).data('focused', true) अब, आदि - alex


समाधान पर विचार करने में इस समस्या का हल ढूंढना निराशाजनक रूप से मुश्किल है वास्तव में बहुत आसान है:

if (document.activeElement == this) {
  // has focus
}

if (document.activeElement != this) {
  // does not have focus
}


4
2017-08-03 11:07



देशी जेएस समाधान प्रदान करने के लिए धन्यवाद। - JoshJ


एक प्लगइन है http://plugins.jquery.com/project/focused

आप भी जांच सकते हैं एक इनपुट फोकस है या नहीं, परीक्षण करने के लिए jQuery का उपयोग करना


3
2018-04-21 14:28



कोई भी इन सभी उत्तरों को बिना किसी स्पष्ट रूप से स्पष्ट कारण के लिए चला गया और नीचे चला गया, इसलिए मेरे लिए +1 से काउंटर - cletus


मुझे पता है कि यह एक पुराना सवाल है, लेकिन मेरा समाधान किसी की मदद करेगा :)

चूंकि यह मेरे लिए काम नहीं करता है:

if ($(this)!=$(document.activeElement)) { ... }

..were "यह" धुंध समारोह से वापस आ गया है। तो मैंने यह किया:

if ($(document.activeElement).attr("class") != "input_textbox"){ ... }

2
2018-02-18 12:40



पहला समाधान किसी भी कारण से jQuery संग्रह में लपेटता है, और यह भी असफल हो जाएगा क्योंकि वे अलग-अलग ऑब्जेक्ट्स होंगे। दूसरी बात यह जांचने का शायद ही कभी एक अच्छा तरीका है कि कोई तत्व वह है जिसे आप किसी से मेल खाते हैं क्योंकि तत्वों में कई वर्ग हो सकते हैं। - alex