[ 타이핑 페이지 만들기_3 ] <textarea> 상하좌우 가운데 정렬 && 폰트 사이즈 자동 조절

이 두개의 기능을 만들 때, 조금 머리아팠던 기능이 가운데 정렬 기능이었다.

<textarea>에 height를 지정을 해버리면 박스의 맨왼쪽 윗쪽부터 글씨가 쓰여져버리고

입력되어지는 글자들의 높이가 <textarea>에서 지정한 height를 넘어가게되면 슬라이드바가 생긴다....

따라서 전체 입력된 글자들을 좌우 중앙정렬은 어렵지 않았으나, 상하 중앙 정렬이 발목을 잡았었다.

찾아보니까 라이브러리가 있긴있었다. 다만 내가 원하던 기능과 조금은 거리가 있어서 조금 더 찾아보다가 그냥 구현하기로 하였다.

중앙 정렬에 이어 미대생이 원했던 기능은 글자가 중앙 정렬이 되면서 글자수가 많아지면 글자의 크기가 줄어드는 것을 원했다. 이것도 예시 페이지를 보여줬는데, 못찾았다ㅜㅜ. 구현한 2개의 기능을 정리해 보고자 한다.

 

 

1. <textarea> 정렬

1) 기능

• textarea에 사용자가 글자를 입력할 때, 감지하여 세로 스크롤 바가 생기지 않으면서 textarea의 높이를 자동으로 조절한다.

• textarea의 높이가 유동적으로 변하더라도 상하 정렬이 중앙으로 유지 되어야 한다.

 

2) 구현

[1] 커다란 <div>안에 verrical-align을 주어 상하 정렬을 시킨다.

[2] <textarea>를 만들어 자동 높이 조절을 해주면 내용이 변경되어도 유동성이 있게 상하 정렬이 가능해진다.

 

 

3) <textarea> 자동 높이 조절 기능

• default rows를 1로 주고 처음에 화면이 로딩되면 1줄만 보이게 한다.(지정안해주면 2줄이 기본이되어 디폴트 글자들을 1줄인데 textarea는 2줄이 생성되어 글자들이 중앙배치가 안되었다ㅜㅜ, 물론 textarea자체는 중앙이었지만....)

<textarea id="input-letter" maxlength="40" rows="1" style="resize: none;" spellcheck="false"></textarea>

• <textarea> 에 height를 auto 로 주면 문자열 크기에 맞게 <textarea>의 높이가 정해진다. (세로 줄이 줄어들 때)

• <textarea>의 높이를 scrollHeight값으로 설정하여 <textarea>의 높이를 재설정. (세로 줄이 늘어날 때)

  • scrollHeight : scroll되어 나타나는 부분까지 높이를 반환한다.

 $("#input-letter").on("propertychange change keyup paste input",function(){
       $(this)[0].style.height='auto';
       $(this).height( $(this).prop('scrollHeight'));     
    });

• 또는 다른방법의 자동 높이 조절 (이게더 편한듯,,,,,)

 $(this).height(1).height($(this).prop('scrollHeight'));

 

 

4) 상하 중앙 정렬 

• 큰 div를 선언.

<div class="input-div">
    <div>
    <textarea id="input-letter" maxlength="40" rows="1" style="resize: none;" spellcheck="false"></textarea>
    </div>
</div>

• 세로 정렬을 선언.

 .input-div{
    vertical-align: middle;
 }

 

 

 

이렇게 선언하면 매우매우 중앙 정렬이 잘된다!

1줄

 

2줄

3줄

 

 

---

2. 폰트 사이즈 자동 조절 기능

1) 기능

• 쓰여지는 글자수에 따라 폰트사이즈 조절 기능.

2) 구현

• 사용자의 입력을 실시간 감지하여, 입력된 글자수를 파악하여 폰트 사이즈를 조절한다.

$("#input-letter").on("propertychange change keyup paste input",function(){
    var content = $(this).val(); /*입력값 받아오기*/
    if(length <= 6 && length>=0){
        $("#input-letter").css("fontSize",'10rem');
        }else if (length > 6 && length <=15 ){
        $("#input-letter").css("fontSize",'8rem');
        }
        else if(length>15&&length<=28){
        $("#input-letter").css('font-size','6rem');
        }
        else if(length>28){
        $("#input-letter").css('font-size','4rem');
    }       
});

글자 수에 따라 폰트사이즈가 변한다!

 

글자수 적을 때

글자수 많을 때