비주류 텍스트 영역 자체 성장 구현 js code_javascript 기술-JS 튜토리얼-php.cn

비주류 텍스트 영역 자체 성장 구현 js code_javascript 기술

WBOY

풀어 주다： 2016-05-16 17:58:13

원래의

876명이 탐색했습니다.

대부분은 scrollHeight(IE에서 도입한 W3C 표준이 아닌 표준) 및 keyup 이벤트를 통해 수행됩니다. 더 흥미로운 것 중 하나는 "미러 요소"와 setTimeout 폴링을 통해 구현됩니다. 일반적인 구현 아이디어는 다음과 같습니다.

position:absolute를 통해 클라이언트 뷰 외부에 별도의 사전 요소를 배치하고 이를 텍스트 영역과 동일한 스타일로 설정한 다음 이 사전 요소를 "미러"라고 부릅니다. setTimeout을 통해 200ms 폴링을 수행하여 텍스트 영역의 새 값을 미러 요소로 업데이트합니다. 미러 요소는 블록으로 설정되어 있으므로 콘텐츠의 양에 따라 크기가 변경된 다음 미러 요소를 가져옵니다. 해당 요소에 offsetHeight가 적용됩니다. 텍스트 영역의 높이가 내용에 따라 변경됩니다.

정말 좋은 생각이네요. 그러나 이러한 폴링은 일반 사용자가 계속 입력하지 않고 매번 offsetHeight를 계산하는 데 리소스를 더 많이 사용하기 때문에 약간 "낭비"적인 것처럼 보입니다.

이제 문제를 발견했으니 다른 사람들의 아이디어를 바탕으로 개선하고 수정하는 것은 그리 어렵지 않을 것입니다.

먼저 미러 요소의 오프셋 높이를 계산하는 작업을 제거하고 래퍼를 사용하여 미러 요소와 텍스트 영역을 래핑하고 해당 스타일을 동일하게 설정할 수 있습니다. 미러 요소는 가시성을 통해 숨겨집니다. 숨겨진(display:none이 아님) 하여 미러 요소 공간이 여전히 점유되도록 한 다음 래퍼를 기준으로 텍스트 영역을 절대적으로 배치하고 이 예에서 텍스트 영역을 미러 요소의 텍스트 영역으로 덮습니다. , 텍스트 영역의 높이 및 너비 속성은 100%로 설정되므로 pre의 높이 변경이 래퍼에 직접 반영될 수 있으며 그에 따라 텍스트 영역의 크기도 변경됩니다. 끝없는 폴링을 위한 "블록 수준" 요소

의 특성을 이용하면 여전히 키업을 사용하는 것이 더 좋다고 생각하지만, 이벤트 처리 측면에서는 사용자에게 시간 간격을 줄 수 있으며 그럴 필요가 없습니다. 예제에서 설정된 시간 간격은 250ms입니다. 사용자가 입력할 때 사용자가 일시 중지하고 250ms 간격이 있는 경우 pre의 범위에 textarea 값을 할당합니다.

이제 아이디어를 설명했으니 비교적 간단할 것입니다.

다음은 html과 해당 자바스크립트입니다(최근 mootools에 푹 빠졌습니다). CSS가 길기 때문에 자세한 내용은 페이지 하단의 jsfiddle 공유를 참조하세요.

코드 복사 코드는 다음과 같습니다.

<span class="mirror"></span><br/&gt ;

코드 복사 코드는 다음과 같습니다.

(함수( $, $$) { 
var mirrorEl = $$('.expanding -area .mirror'), 
textEl = $$('.expanding-area .source'), 
timehandle = null, 
handler = function() { 
mirrorEl.set('text', textEl.get('value')) 
} 
handler() 
textEl.addEvent(' keyup', function(event) { 
clearTimeout(timehandle); 
timehandle = handler.delay(200) 
})($, $$); 🎜> 
마지막으로 참고자료가 있는데, 관심 있으신 분들은 "
참고자료
"를 참고해 보세요. 이 예시는 IE6을 지원하지 않을 수도 있습니다. IE6는 잠시 프론트엔드 작업을 하고 있으니 먼저 살펴보도록 하겠습니다:D