クリック時のテキストボックスの自動サイズ変更

Question

クリック時にテキストボックスのサイズを変更しようとしています。頭の中で

：それは私のために拡大されていない

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

：

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

と体。

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を取得していることを確認することをお勧めします。