jquery焦点输入/输出

我想将类“active”添加到输入焦点上的输入，当焦点关闭时，移除该类

---

谢谢

您可能需要类似

$（this.attr（'class'，'active'）集中在
和
$（this.attr（'class'，''）在您的
聚焦输出中

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

这将解决您的问题
一旦包含了jquery库，它就相当标准了

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

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

聚焦和模糊比focusin和focusout更适合输入聚焦。focusin和focusout气泡事件到子对象，在大多数情况下，这（可能）在这里是不必要的

相当标准的东西。更多信息，请查看jquery文档。如果您只想为特定的输入字段修改选择器（“输入”部分）

选择器示例：

$（'input#my _id _is _bob'）用于
$（'input.my_class_是可激活的）
您可以使用jQuery的
focus
和
blur
函数

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

尝试以下方法

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

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

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

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

或者最好尝试使用以下方法：

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

如果您使用输入元素，如“共享表单”，并使用按钮“发送消息”或其他不隐藏表单的内容，则代码更有用：

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

看起来是这样的：

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

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

或超短：

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

聚焦和模糊的替代方案是“聚焦”和“聚焦输出”，但正如迈克尔·格拉斯所指出的，它们是泡沫事件

当某个元素或其中的任何元素获得焦点时，focusin事件被发送到该元素。这与焦点事件不同，因为它支持在父元素上检测焦点事件（换句话说，它支持事件冒泡）

您可以使用
.bind（）
或更好的
.on（）
方法附加事件处理程序，然后检查
事件。键入

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

是的，我放入了下一个代码，但它不起作用：$（document）.ready（function（）{$（“input”）.focusin（function（）{$（this.addClass（'active'）；}）；$（“input”）.focusout（function（）{$（this.removeClass（'active'）；}）；这对我不起作用，可能是jquery版本中的问题。我有：jquery-1.4.2.min.js