[Jquery/JS] TEXTAREA 자동 높이 조절_커서위치_엔터

[Jquery/JS]  TEXTAREA 자동 높이 조절_커서위치_엔터

1. 자동높이조절

▼  JavaScript 사용 예제

<style>
 
//넒이설정
.textarea_size{
 width:90%;
}
//최소 높이값설정
textarea.textarea_size{ min-height: 50px; }
 
</style>
 
//에어리어지정  
<textarea class="textarea_size" onkeydown="resize(this)" onkeyup="resize(this)" ></textarea>
 
<script>
 
//리사이즈 스크립트 설정
function resize(obj) {
  obj.style.height = "1px";
  obj.style.height = (12+obj.scrollHeight)+"px";
}
</script>

▼  Jquery 사용 예제

<style>
 
//넒이설정
.textarea_size{
 width:90%;
}
//최소 높이값설정
textarea.textarea_size{ min-height: 50px; }
 
</style>
 
<textarea class="textarea_size" ></textarea>
 
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("textarea.textarea_size").on('keydown keyup', function () {
  $(this).height(1).height( $(this).prop('scrollHeight')+12 );    
});
</script>
 

2. 커서 위치

커서위치가 첫 시작점부터 시작하지 않고 중간쯤 혹은 탭을 한 위치 정도에서 시작하였을 때에는

 
//에어리어지정  
<textarea id="contentz" 
    class="textarea_size" onkeydown="resize(this)"
    onkeyup="resize(this)" ></textarea>
 
 

다음 소스처럼 띄어쓰기 혹은 열맞춤을 했는지 확인하자 반드시 한줄로 변경하여야 한다 

3. 텍스트 에어리어에서 엔터가 먹히지않을경우

위의 텍스트 에어리어로 선언해준경우가 아닌 아래 소스처럼

input type=textarea로 설정하였을 경우 종종 먹히지 않는 경우도 있으니

textarea 로 직접 선언해주자

 
//에어리어지정  
<input type=textarea id="contentz" class="textarea_size" onkeydown="resize(this)" onkeyup="resize(this)" />