jquery - 单击时文本框自动调整大小

Question

我试图在点击时调整文本框的大小。

在头部:

<style>
.expand {
    height: 1em;
    width: 50%;
    padding: 3px;
}
</style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
$('textarea.expand').focus(function () {
    $(this).animate({ height: "1000px" }, 500);
});
</script>

和正文:

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

它对我来说没有扩展。

Answer 1

它不起作用的原因是您没有在 $(document).ready() 上指定事件绑定(bind)，因此事件在元素存在于 DOM 中之前绑定(bind)。试试这个:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
$(document).ready(function(){
    $('textarea.expand').focus(function () {
        $(this).animate({ height: "1000px" }, 500);
    });
});
</script>

JS Fiddle demo .

还值得注意的是，在最新的浏览器中，您不一定需要 JavaScript:

.expand {
    height: 1em;
    width: 50%;
    padding: 3px;
    -webkit-transition: all 1s linear;
    -0-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}

.expand:focus {
    height: 1000px;
    -webkit-transition: all 1s linear;
    -0-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -moz-transition: all 1s linear;
    transition: all 1s linear;
}​

JS Fiddle demo .