I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) 제이쿼리 textarea 높이 자동으로 조절하기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 3. 7. 13:35

반응형

[즐거'웅'코드] 목차

  1. jQuery
  2. 예제 소스
  3. 구현 예시
jQuery
1
2
3
4
5
6
 
<script>
    $('textarea').on('keyup', function (e) {
        $(this).css('height', 'auto');
        $(this).height(this.scrollHeight - 15);
    });
</script>
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
<textarea></textarea>
 
<style>
    textarea {
        resize: none;
        overflow-y: hidden;
        height: auto;
        padding: 10px;
    }
</style>
 
<script>
    $('textarea').on('keyup', function (e) {
        $(this).css('height', 'auto');
        $(this).height(this.scrollHeight - 15);
    });
</script>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) 자바스크립트 카운트 1씩 감소시키기  (0) 2021.03.09
(즐거웅코드) 자바스크립트 카운트 1씩 증가시키기  (0) 2021.03.08
(즐거웅코드) CSS textarea 우측 하단 세줄 표시 없애기  (0) 2021.03.06
(즐거웅코드) CSS로 마우스 올리면 객체를 오른쪽으로 움직이게 하기  (0) 2021.03.05
(즐거웅코드) CSS로 마우스 올리면 객체를 왼쪽으로 움직이게 하기  (0) 2021.03.04

관련글

댓글 0

티스토리툴바