텍스트 영역 자동 확장

Question

간단한 자동 확장 텍스트 영역을 만들려고 합니다. 내 코드는 다음과 같습니다.

으아아아

하지만 입력할 때마다 텍스트 영역이 무한히 커집니다...

이를 위한 Dojo 및 jQuery 플러그인이 있다는 것을 알고 있지만 사용하고 싶지 않습니다. 나는 그들의 구현을 보고 원래 scrollHeight를 사용했지만 동일한 작업을 수행했습니다.

답변을 시작하고 텍스트 영역을 사용하여 답변을 재생할 수 있습니다.

Answer 1

자동 확장 영역을 행 수(예: 5행)로 제한하고 싶습니다. Rob의 솔루션을 위해 "em" 단위를 사용하는 것을 고려했지만 이는 오류가 발생하기 쉬우며 패딩과 같은 사항을 고려하지 않습니다.

내 생각은 이렇다:

으아악

바이올린: http://jsfiddle.net/cgSj3/

Answer 2

사용 중scrollHeight正确扩展/收缩文本区域之前重置高度。 Math.min()을 사용하여 텍스트 영역의 높이 제한을 설정할 수 있습니다.

코드:

으아아아

바이올린: http://jsfiddle.net/gjqWy/155

참고: IE8 및 이전 버전에서는 input 이벤트가 지원되지 않습니다 input 事件IE8 及更早版本不支持 。如果您也想支持这个古老的浏览器，请使用 keydown 或 keyup 以及 onpaste 和/或 oncut. 이 고대 브라우저도 지원하려면 keydown 또는 keyup과 onpaste 및/또는 oncut을 사용하세요.