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