jquery - 在单击选定的文本区域时更改 $(this) css 属性“仅聚焦”

Question

我有以下 HTML：

    <textarea class="new" id="1"></textarea>
    <textarea class="new" id="2"></textarea>

以及这个 CSS：

.new {
    height:60px;     
}

.new:focus {
    height:80px;
}

当 textarea 获得焦点时（用户单击或使用标签），我希望将其高度更改为 100px，但前提是它的值是非空字符串。我怎样才能做到这一点？

更新::我希望 textarea 像 twitter 一样运行

谢谢阅读

Answer 1

下面的代码将增加一个文本区域的高度，如果它有焦点，如果它的内容不为空，则在失去焦点时保持增加的高度。

//html
<div class="container">
    <textarea class="new" id="1"></textarea>
    <textarea class="new" id="2"></textarea>
</div>

//css
.new {
    height:20px;     
}
.new:focus, .new.notEmpty {
    height:80px;
}


//javascript
$('.container').on('change', 'textarea.new', function(){
    var notEmpty = $(this).val().length > 0;
    $(this).toggleClass('notEmpty', notEmpty);
});

小提琴

不推荐使用.live()，而是使用事件委托。

$('.container').on('change', 'textarea.new', ... )是委托的一个例子。如果您没有任何要定位的自然容器，请使用$(document).on( ... ).