jQuery फोकस/बाहर

Question

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

धन्यवाद के

Answer 1

का समाधान होगा एक बार आप jQuery lib को शामिल किया है, यह बहुत मानक

$('input').focus(function() { 
    $(this).addClass('active'); 
}); 

$('input').blur(function() { 
    $(this).removeClass('active'); 
}); 

फोकस और कलंक Focusin की तुलना में अधिक उपयुक्त हैं और सिर्फ इनपुट ध्यान केंद्रित के लिए focusout। फोकसिन और फोकसआउट बबल इवेंट बच्चों के ऑब्जेक्ट्स और अधिकांश भाग के लिए, यह (संभवतः) अनावश्यक है।

सुंदर मानक सामान। अधिक के लिए jquery दस्तावेज़ों पर एक नज़र डालें। यदि आप केवल इसे विशेष इनपुट फ़ील्ड के लिए चाहते हैं तो चयनकर्ता ('इनपुट' भाग) को भी संशोधित कर सकते हैं।

चयनकर्ता उदाहरण:

Answer 2

आप शायद अपने focusout में अपने focusin और $(this).attr('class',''); में $(this).attr('class','active'); की तरह कुछ करना चाहते हैं।

Answer 3

$("#id-of-your-field").focusin(function() { 
    $('#id-of-your-field').addClass("active"); 
}); 
$("#id-of-your-field").focusout(function() { 
    $('#id-of-your-field').removeClass("active"); 
}); 

यह आपकी समस्या

Answer 4

के लिए $ ('input.my_class_is_activatable') के लिए $ ('इनपुट # my_id_is_bob') आप jQuery के focus और blur कार्यों का उपयोग कर सकते हैं

$('input[type="text"]').focus(function() { 
    $(this).addClass("active"); 
}); 
$('input[type="text"]').blur(function() { 
    $(this).removeClass("active"); 
}); 

Answer 5

कोशिश निम्नलिखित।

$('#target-id').focusin( 
    function(){ 
    $(this).addClass('active'); 
    }).focusout( 
    function(){ 
    $(this).removeClass('active'); 
    }); 

Answer 6

लक्ष्य-आईडी इनपुट की आईडी है जिस पर आप में वर्ग स्वैप और बाहर करना चाहते हैं, तो आप कुछ इस तरह इस्तेमाल कर सकते हैं:

$('input[type="text"]').focus(function() { 
    $(this).addClass("active"); 
}).blur(function() { 
    $(this).removeClass("active"); 
}); 

Answer 7

या बेहतर यह उपयोग करने के लिए कोशिश:

$("input[type=text]").focus(function(){ 
    $(this).addClass("active"); 
}).focusOut(function(){ 
    $(this).removeClass("active"); 
}); 

Answer 8

अधिक उपयोगी कोड यदि आप इनपुट तत्वों, जैसे 'शेयर फॉर्म' और उपयोग बटन या कुछ और 'संदेश भेजें' शामिल नहीं है छिपाने के रूपों की तुलना में उपयोग करें:

$(function() { 
    $("html").click(function(e) { 
     if (e.target.id == "your_id_element") { 
      $('#your_id_elements').addClass('open'); 
     } else if($(e.target).closest('.some_div_without_reaction').length == 0) { 
      if($('#your_id_element').hasClass('open') && $('#your_id_element').val()==''){ 
       $('#your_id_element').removeClass('open'); 
      } 
     } 
    }); 
}) 

Answer 9

jQuery on() इस प्रकार दिखाई देगा:

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

या अतिरिक्त अतिरिक्त लघु: फोकस & कलंक के लिए

$('input').on("focus blur", function() { 
    $(this).toggleClass('active'); 
}); 

विकल्प "Focusin" और "focusout" हैं, लेकिन माइकल ग्लास के रूप में की घटनाओं बुदबुदाती कर रहे हैं बताया।

फोकसिन घटना किसी तत्व को भेजी जाती है जब यह, या इसके अंदर कोई तत्व, फोकस प्राप्त करता है। यह फ़ोकस ईवेंट से अलग है जिसमें यह मूल तत्वों पर फ़ोकस ईवेंट का पता लगाने का समर्थन करता है (दूसरे शब्दों में, यह ईवेंट बबलिंग का समर्थन करता है)।

Answer 10

आप .bind() या बेहतर .on() विधि का उपयोग कर तो event.type

$(element).bind("focus blur", function(event){ 
    event.stopPropagation(); 
    if(event.type == "focus") 
     { 
     // Input focused/clicked 
     $(element).addClass('active'); 
     } 

    else if(event.type == "blur") 
     { 
     // Lost focus 
     $(element).removeClass('active'); 
     } 
});