HTML textarea 속성 - 자동 높이 조절(auto resize) 예제

<textarea>

집이 멀어서 금요일에 칼퇴를

해본들 고속도로에서 보내는

시간이 더 많기 때문에 퇴근을

안하다가 지금까지 회사에 있네요.

퇴근하기 전에 정말 간단한 예제나

하나 올리고 퇴근하렵니다~

내일 강화도로 놀러가서 이틀동안

블로그 포스팅을 할 수 없으니

짜잘한 내용으로 얼른 포스팅 하나

하고 집에 가서 내일 갈 준비해야죠~

아 참고로 이 포스팅은 전에 올린

modal에 연장된 글입니다~

모달창 예제

위에 캡처화면은 모달을 띄워서

textarea에 특정 값을 보여주는

창인데;;;; 대괄호, 중괄호 두 개만

보이고 정작 중요할 것 같은 부분은

아예 보이질 않네요... 생각 같아서는

resize 어트리뷰트 하나 주면 되지

않을까 생각해보지만 제 생각대로

되는게 세상에 몇 가지나 있겠습니까?ㅋ

위에 띄운 modal 창에 있는

textarea 태그입니다. 보시면

onfocus="resize(this)" 

라는 부분이 보이는데 텍스트 영역

(textarea)에 포커스가 맞춰지면

자동으로 안에 내용에 맞게 textzrea의

높이를 조절해주는 resize 함수를

호출하고 있습니다.

resize 함수는 아래와 같습니다.

함수 밖에 있는 elasticModal 어쩌고

저쩌고 하는 부분은 모달창을 띄우는

부분이니 무시하시면 됩니다

강화도 여행 끝나고 와서 포스팅

남겨 놓겠습니다^^

AngularJS 부트스트랩(bootstrap) 모달(Modal) 창 예제

Modal

제가 작업하고 있는 프로젝트가

아니고 또 AngularJS를 사용하지 않는다고

해도 아래와 같은 모달창은 웹 페이지 작업

에서 많이 사용이 됩니다. 일회성 정보나

설정 값 입력 등의 작업을 화면에서 할 때

현재 화면에 이동이나 큰 변화 없이

별도의 창을 하나 띄워 그 창에서 작업을

완료하면 다시 창을 닫는 형태의 작업에서

이 Modal 창을 참 유용하죠~

AngularJS에서 모달창을 띄울 때

bootstrap 모듈을 이용해서 띄우고

있는데 모달창을 띄워야 되는 페이지의

html 파일에서 아래와 같이 모달 페이지에

해당하는 html의 경로를 ng-include를

이용해서 아래와 같이 입력합니다.

그리고 위에 경로를 입력해준

html의 컨트롤러에서 아래와 같이

해당 모달 창을 띄워 줍니다.

주석으로 처리되어 있는 이유는 위에

방법을 사용하지 않기 때문입니다.

이유는 지금부터 설명하겠습니다.

Modal로 파라미터 보내기

프로젝트를 해오면서 지금까지는 모달창에

보이는 내용은 모달 자체의 controller에서

처리한 값이나 박힌 값들로 구성이 되어

있었습니다. 그런데 이번에는 모달창을

호출했던 페이지에서 특정 값을 모달창으로

넘겨야 하는 경우가 생겼습니다.

일단 위에서 사용한 ng-include는 동일하게

사용합니다. 그리고 모달창을 띄우기 위한

태그에 angularjs에서 제공하는 ng-click으로

아래와 같이 search()라는 함수를

호출하게 했습니다.

위에 상황을 대략 설명 드리자면

컨트롤러에 있는 search 함수를

호출해서 모달창을 띄우려고 하는데

이 모달창으로 특정 값을 보내고

싶은데 그 값이 vm.page + $index

이 값입니다. 단순 정수 값인데

이 값을 알아야 모달창에 작업을

진행할 수 있습니다. 그리고 GET_SOURCE

값은 컨트롤러에서 분기를 위한 값입니다.

아래의 코드를 보시면 이해가 되실 겁니다.

if문에서 condition 값이 GET_SOURCE 인 경우

즉 지금 제가 하고 있는 작업이 저 else if 문에서

실행되는 겁니다. 안에 내용도 설명을 드리겠습니다.

내용은 두 줄이 전부입니다.

첫 번째 라이은 제가 필요로 하던 값(param)을

모달 창의 특정 태그에 set 하는 부분이고,

두 번째 라인은 그 modal창을 띄우는 부분입니다.

첫 번째 라인은 form-group이라는 값을

클래스로 갖는 태그에서 result_index라는

name 값을 가지는 태그에 param 변수에

담긴 값을 set 하라는 내용입니다.

모달 창에서 위에 값이 set 되는 부분은

아래와 같습니다.

그래서 결과는 아래와 같이 나왔습니다.

정말 간단한 숫자 값 하나이지만

저 하나를 얻기 위해 엄청난 시간을

허비했습니다. 몰라서...

방법을 가르켜준 다나양에게

다시 한 번 감사의 인사를...

꾸벅~