单击时如何扩展文本区域

Question

我在一个小项目上工作,有一个textarea,我需要帮助使文本区域扩展鼠标点击像twitter和Facebook.textarea应该首先看起来像文本字段,然后点击时应该展开.

Answer 1

这可以在不使用JavaScript/jQuery的情况下使用CSS 转换完成.

textarea {
    height: 1em;
    width: 50%;
    padding: 3px;
    transition: all 0.5s ease;
}

textarea:focus {
    height: 4em;
}

<textarea rows="1" cols="10"></textarea>

Answer 2

像这样的东西会起作用......

演示:http://jsfiddle.net/Y3rMM/

CSS ...

.expand {
    height: 1em;
    width: 50%;
    padding: 3px;
}

HTML ...

<textarea class="expand" rows="1" cols="10"></textarea>

jQuery的...

$('textarea.expand').focus(function () {
    $(this).animate({ height: "4em" }, 500);
});

Answer 3

这对你有用:

<textarea rows="1" cols="40" onfocus="this.rows=10;" style="resize: none;">Tweet Tweet....</textarea>

我使用onfocus而不是onclick因为onclick如果用户使用tab键移动到textarea ,则不会触发.您还需要确保用户无法自行调整大小 - 因此也就是样式属性.

onblur="this.rows=1;"一旦用户离开您的textarea,您还可以添加以将其缩小.