Javascript 텍스트 상자 텍스트 영역 높이가 content_form 특수 효과를 사용하여 적응적으로 축소됩니다.

코드 직접 업로드:
옵션 1:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Feng Yunzhi » 텍스트 상자 텍스트 영역 높이 적응형 성장/축소</title> <style> textarea { height:100px; width: 300px; } </style> <!--以下代码中onpropertychange：IE支持；oninput：FireFox支持；为了兼容IE和FF，所以加上了这个两个；--> <textarea id="txtContent" rows="1" onpropertychange="ResizeTextarea()" oninput="ResizeTextarea()" onkeyup="ResizeTextarea()">제작: Qingfeng http://jb51.net
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]

옵션 1은 각 브라우저에서 사용할 수 있으며, 콘텐츠에 따라 텍스트 상자가 적응적으로 커지는 데는 문제가 없지만, 콘텐츠를 삭제할 때 성능이 저하되는 데에는 차이가 있지만, Firefox, Chrome, Safari는 줄어들지 않습니다. . 그 이유는 텍스트 상자 콘텐츠 높이가 텍스트 상자 높이보다 작을 때 scrollHeight 값이 텍스트 상자 콘텐츠 높이가 아닌 텍스트 상자 높이와 같기 때문입니다.
옵션 2:

코드 복사

코드는 다음과 같습니다.

;textarea id="txtContent"rows="5" cols="50" onkeyup="ResizeTextarea()" style="overflow-y:hidden;">텍스트 영역 높이는 콘텐츠, 스크롤 막대 없음
제작: Qingfeng
http://jb51.net

>
각 브라우저의 옵션 2 성능은 동일하며 텍스트 상자는 내용에 따라 적응적으로 늘리거나 줄일 수 있습니다. 그러나 한 가지 단점은 텍스트 상자의 높이가 증가하면 텍스트 상자 표시가 점프한다는 것입니다.
또한 위의 두 가지 해결 방법은 텍스트 상자 오른쪽 클릭 메뉴에서 잘라내기, 붙여넣기, 삭제 및 기타 명령을 선택하여 텍스트 내용을 조작하는 데 유효하지 않습니다. 아직까지 완벽한 해결책은 발견되지 않았으며 향후 연구의 여지가 있다고 할 수 있습니다. 혹시 완벽한 계획을 가지고 있는 학생이 있다면 알려주세요!




기타 옵션:

탄력적인 텍스트 영역에 대한 다른 접근 방식
솔루션 2는 이 기사를 참조하여 구현됩니다.

Ext JS로 Elastic Textarea 구축

스마트 텍스트 영역: IE, Firefox, Opera 및 Safari의 scrollHeight

1. 원본 링크: http://witmax.cn/javascript-textarea-auto-grow.html