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

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>

和body：

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

对我来说，它不是在扩展。

Answer 1

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

<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。

Answer 2

代码看起来很好，并且可以在JS Fiddle http://jsfiddle.net/Pt3d8/1/中正常运行。您可能需要检查以确保Google JSAPI正确地拉取jQuery！