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

jQuery onfocus和onblur事件缩小

1 个答案: