Включение/выключение фокуса jquery

Ответ 1

после того, как вы включили jquery lib, он довольно стандартный

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

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

фокус и размытие являются более подходящими, чем focusin и focusout для только фокусировки ввода. focusin и focusout bubble events для дочерних объектов и по большей части, которые (вероятно) не нужны здесь.

довольно стандартный материал. взгляните на документы jquery для более подробной информации. также, возможно, изменить селектор (часть "вход" ), если вы хотите его только для определенных полей ввода.

примеры селекторов:

$('input # my_id_is_bob') для $ ('input.my_class_is_activatable') для

Ответ 2

Если идентификатор цели - это идентификатор входа, на который вы хотите поменять класс, вы можете использовать что-то вроде этого:

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

Ответ 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");
});

Это решит вашу проблему.

Ответ 4

Попробуйте следующее.

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

Ответ 5

jQuery on() будет выглядеть следующим образом:

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

или лишний короткий:

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

Альтернативы фокуса и размытия - "фокус" и "фокус", но пузырящиеся события, как отметил Майкл Гласс.

Событие focusin отправляется элементу, когда он или любой элемент внутри него получает фокус. Это отличается от фокусного события тем, что он поддерживает обнаружение события фокуса на родительских элементах (другими словами, он поддерживает пузырьки событий).

Ответ 6

Вероятно, вам нужно что-то вроде $(this).attr('class','active'); в focusin и $(this).attr('class',''); в вашем focusout.

Ответ 7

Вы можете использовать функции jQuery focus и blur

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

Ответ 8

Или лучше попробуйте использовать это:

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

Ответ 9

Более полезный код, если вы используете элементы ввода, такие как "Отправить формы" и используйте кнопку "Отправить сообщение" или что-то, что не скрывает формы:

$(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');
            }
        }
    });
})

Ответ 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');
       }
 });