jQuery onfocus和onblur事件缩小

Question

正如你所看到的，我试图增加文本字段的高度，当用户键入它并且当他点击时（元素失去焦点），我正在缩小它。

有没有更简单的方法来编写下面的代码？

简单的HTML输入字段：

<input type="text" />

的jQuery：

$(document).ready(function() { 

    $('input').on('focus', function() { 
     $(this).height('20px'); 
    }); 

    $('input').on('blur', function() { 
     $(this).height('12px'); 
    }); 

}); 

Answer 1

这可以更有效地与刚刚CSS进行，但使用jQuery，您可以使用事件委托。

$(document).on('focus blur', 'input', function(e) { 
    $(this).height(e.type === 'focusin' ? '20px' : '12px'); 
}) 

为了完整起见，这里的CSS解决方案：

input { 
    height: 12px; 
} 
input:focus { 
    height: 20px; 
}