클릭시 텍스트 상자 자동 크기 조정

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()에 이벤트 바인딩을 지정하지 않았기 때문에 이벤트가 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

그것은 더 최신의 브라우저에서, 당신은 반드시이 자바 스크립트를 필요로하지 않는 것을 주목할 가치가있다 :

.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 피들에서 제대로 실행되고 있습니다 - http://jsfiddle.net/Pt3d8/1/. Google JSAPI가 제대로 jQuery를 가져 오는지 확인하고 싶을 수도 있습니다.