Question

我想在输入焦点上添加类“active”，并在焦点关闭时删除该类。

感谢的

Answer 1

一旦你包含了jquery lib，它就非常标准了

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

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

聚焦和模糊比仅用输入聚焦的聚焦和聚焦更合适。聚焦和聚焦泡沫事件到儿童对象，并且在大多数情况下，这可能是不必要的。

相当标准的东西。看一下jquery文档了解更多信息。如果您只想要特定的输入字段，也可以修改选择器（'输入'部分）。

选择器示例：

$（'input＃my_id_is_bob'）for

的$（'input.my_class_is_activatable'）

Answer 2

如果target-id是要在其中交换类的输入的id，则可以使用以下内容：

$('#target-id').focusin(  
  function(){  
    $(this).addClass('active');  
  }).focusout(  
  function(){  
    $(this).removeClass('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[type=text]").focus(function(){
  $(this).addClass("active");
}).focusOut(function(){
  $(this).removeClass("active");
});

Answer 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事件或其中的任何元素获得焦点时，focusin事件将被发送到该元素。这与焦点事件的区别在于它支持检测父元素上的焦点事件（换句话说，它支持事件冒泡）。

Answer 6

您可能希望$(this).attr('class','active');中的focusin和$(this).attr('class',''); focusout中有{{1}}。

Answer 7

您可以使用jQuery的focus和blur函数

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

Answer 8

或者最好尝试使用它：

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

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

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

jquery焦点进/出

10 个答案: