자동 확장 Textarea JQuery 플러그인, 1 부를 구축하는 방법

텍스트 영역을 자동으로 확장하는 것은 Facebook과 같은 사이트에서 매우 인기가 있습니다. 텍스트 영역 상자의 높이는 사용자가 입력 한 텍스트의 양에 따라 확장되고 줄어 듭니다. 이것은 몇 가지 장점이 있습니다 :

귀하의 페이지 디자인은 큰 텍스트 영역 상자에 의해 지배되지 않습니다.

여러 텍스트 영역이있는 온라인 양식은 더 짧고 완료하기가 더 쉽습니다.
1. 사용자는 스크롤하지 않고 모든 텍스트를 볼 수 있습니다.
2. 확장 된 텍스트 영역 시연을 봅니다 ... 이 3 부 자습서는 HTML 및 재사용 가능한 jQuery 플러그인을 사용하여 자동으로 확장 된 텍스트 영역을 빌드하는 방법에 대해 설명합니다. 세 번째 부분이 끝날 무렵, 당신은 그것이 어떻게 작동하는지 이해하고 자신의 프로젝트에서 사용할 수있는 코드를 가질 것입니다.
3. 수요 모든 훌륭한 개발자와 마찬가지로 시스템 요구 사항을 완전히 이해해야합니다.
필요한 경우 모든 페이지의 텍스트 영역은 자동으로 확장되어야합니다.

그러나 일부 텍스트 영역에는 자동 확장이 필요하지 않을 수 있습니다.

우리는 텍스트 영역 높이가 (a) 무한히 자라거나 (b) 특정 범위 내에서 자랄 수 있도록 지정할 수 있어야합니다. 예를 들어, 50 ~ 200 픽셀 사이의 최적 높이를 사용합니다.

우리가 선택한 모든 페이지에서 솔루션을 재사용 할 수 있어야합니다.

고급 향상 기술을 사용하여 JavaScript가없는 사용자가 여전히 표준 텍스트 영역 상자를 사용할 수 있도록해야합니다.

이 솔루션은 IE6, Firefox 2, Opera, Safari 및 Chrome과 호환되어야합니다.

제안

우리는 jQuery 플러그인으로 솔루션을 구현합니다. jQuery는 주로 DOM 스니핑 및 이벤트 위임과 같은 더 평범한 측면을 처리하는 데 사용됩니다.

그러나 텍스트 영역을 크기를 조정 해야하는시기와 어떤 높이를 사용할 키를 어떻게 알 수 있습니까?

먼저, "keyup"이벤트 핸들러를 텍스트 영역에 할당 할 수 있습니다. 키가 눌린 직후에 함수를 호출하고 텍스트가 수정됩니다.
1. 그런 다음 Dom ScrollHeight 속성을 확인할 수 있습니다. 이것은 내부 스크롤 부분의 높이, 즉 사용자가 입력 한 텍스트의 높이를 반환합니다. 텍스트 영역의 높이를 현재 스크래어 리이트 값으로 설정하면 스크롤 바가 관련이 없습니다. 불행히도 ScrollHeight는 W3C 권장 사항이 아니며 일부 크로스 브라우저 불일치를 극복해야합니다.
   Firefox, Safari 및 Chrome에서 ScrollHeight는 텍스트가 추가되지 않은 경우에도 텍스트 영역 높이보다 작습니다. 따라서 상자가 확장되지만 텍스트를 제거하면 축소되지 않습니다. 텍스트 영역 높이를 0px로 일시적으로 설정 한 다음 실제
   • 스크롤 리이트 값을 적용 하여이 문제를 해결할 수 있습니다. Mozilla ScrollHeight 문서와는 달리 Firefox는 텍스트 영역 패딩을 포함하지 않는 것처럼 보이며 Safari 4와 Chrome 2에는 포함됩니다. 상단과 하단에 2px 패딩이 있으면 WebKit 브라우저에서 스크롤 하이가 4px 더 크고 텍스트 영역 높이가 무한히 커집니다. 패딩을 빼면 Firefox가 파손되므로 가장 쉬운 솔루션은 0px 수직 패딩을 확장 된 텍스트 영역 요소에 적용하는 것입니다. ScrollHeight는 IE와 Opera에서 이상합니다. 일반적으로 내부 텍스트의 실제 높이를 반환하지만 텍스트 영역 높이를 0px로 설정하면 잘못된 스크롤 리이트 값을 반환합니다. 브라우저 스니핑은 끔찍하지만이 경우 다른 옵션이 없다고 생각합니다. IE와 Opera가 텍스트 영역 높이를 0px로 설정하지 않도록해야합니다.
   • 우리는 또한 스크롤 바를 고려해야합니다. 기본적으로 대부분의 브라우저는 필요할 때 텍스트 영역 스크롤 막대 만 표시합니다. 그러나 오버플로를 "자동"으로 설정하면 새 선을 추가하면 스크롤 막대가 나타납니다. 그런 다음 텍스트 영역의 높이를 변경하면 사라집니다. 오버 플로우를 "숨겨진"으로 설정하면 플래시 스크롤 바 문제가 해결되지만, 지정된 최대 높이를 넘어 확장 된 확장되지 않은 텍스트 영역이나 텍스트 영역에 적용해서는 안됩니다.
   
   마지막으로 브라우저 창 크기 조정이 문제가 될 수 있습니다. 유체 웹 디자인은 비율 기반 너비의 텍스트 영역을 구현할 수 있습니다. Window Resize를 감지 할 수는 있지만 IE에서 이벤트가 제대로 작동하지 않으며 핸들러를 신속하게 호출합니다. 이 문제를 해결할 수 있지만 여러 텍스트 영역을 크기로 조정하면 페이지 디자인이 사용자를 점프하고 혼동하게 할 수 있습니다. 따라서 크기 조정 후 사용자 스위치가 상자에 초점을 맞추면 텍스트 영역의 높이 만 조정합니다.
   • 흡수 할 내용이 많으며 더 많은 내용이 있습니다! 커피 한 잔을 마시고 두 번째 부분을 준비하십시오 ...
   2 부 : 텍스트 영역 초기화 파트 3 : JavaScript 플러그인 코드

   jQuery 플러그인을 개발하는 방법

위 내용은 자동 확장 Textarea JQuery 플러그인, 1 부를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!