코드만 보면 매우 간단하고 실용적입니다. 코드 복사 코드는 다음과 같습니다. 자동 크기 조정 텍스트 영역<br>텍스트 영역 {<br> 테두리: 0 없음 흰색 <br> 오버플로: 숨김;<br> 패딩: 0;<br> 개요: 없음;<br> 배경색: #D0D0D0;<br> 크기 조정: 없음;<br>}<br>< /style> <br><script type="text/javascript"><br>var 관찰;<br>if (window.attachEvent) {<br> 관찰 = 함수(요소, 이벤트, 핸들러) {<br> element.attachEvent('on' 이벤트, 핸들러);<br> };<br>}<br>else {<br> 관찰 = 함수(요소, 이벤트, 핸들러) {<br> element.addEventListener(이벤트, handler, false );<br> };<br>}<br>function init () {<br> var text = document.getElementById('text');<br> function resize () {<br> text. style.height = 'auto';<br> text.style.height = text.scrollHeight 'px';<br> }<br> /* 이미 변경된 텍스트를 가져오기 위한 0-시간 제한 */<br> 함수 DelayResize( ) {<br> window.setTimeout(resize, 0);<br> }<br> 관찰(text, 'change', resize);<br> 관찰(text, 'cut', DelayedResize);<br> 관찰 (text, 'paste', DelayedResize);<br>observe(text, 'drop', DelayedResize);<br>observe(text, 'keydown', DelayedResize); <p> text.focus();<br> text.select();<br> resize();<br>}<br></script><br></head><br>< body onload="init();"><br><textarea cols="40"rows="1" style="height:25px;" id="text"></textarea><br> </p> </div>
웹 프론트엔드
JS 튜토리얼
content_javascript 기술을 기반으로 한 텍스트 영역 적응 높이
