콘텐츠 삭제 시 축소되는 자체 크기 조정 TextArea를 만드는 방법은 무엇입니까?

축소되는 자동 크기 조정으로 텍스트 영역 만들기

도전과제: 자동 크기 조정을 사용하여 텍스트 영역을 만들려는 이전 시도 크기 조정이 콘텐츠의 텍스트 영역을 축소하지 못했습니다. 삭제.

해결책:

원래 스레드에서 제공된 코드는 내용에 따라 텍스트 영역의 높이를 조정합니다. 그러나 콘텐츠 삭제를 고려하지 않아 잘못된 clientHeight 값이 발생합니다.

이 제한을 극복하려면 보다 포괄적인 솔루션이 필요합니다.

function FitToContentWithShrink(id, maxHeight) {
  var text = id && id.style ? id : document.getElementById(id);
  if (!text) return;

  var newHeight = text.scrollHeight;
  var currentHeight = text.clientHeight;

  // Check if the content has changed
  if (newHeight !== currentHeight) {
    if (newHeight > currentHeight) {
      // If the new height is greater than the current height, expand
      text.style.height = newHeight + "px";
    } else if (newHeight < currentHeight) {
      // If the new height is less than the current height, shrink
      text.style.height = newHeight + "px";
    }
  }
}

이점:

• 콘텐츠 축소: 이 솔루션은 올바르게 삭제를 포함한 콘텐츠 변경 사항을 기반으로 새 높이를 계산합니다.
• 여러 브라우저에서 신뢰성: Firefox, Chrome, IE, Edge, IOS Safari 및 Android 브라우저를 지원합니다.
• 미리 로드된 텍스트로 작동: 미리 채워진 텍스트를 처리합니다. 텍스트 영역.
• 다양성: 웹사이트의 모든 텍스트 영역에 적용할 수 있습니다.

사용:

window.onload = function () {
  document.getElementById("ta").onkeyup = function () {
    FitToContentWithShrink(this, 500);
  };
};

추가 참고:

엄격 모드에서 JavaScript를 적용해도 이 솔루션의 기능에는 영향을 미치지 않습니다.

위 내용은 콘텐츠 삭제 시 축소되는 자체 크기 조정 TextArea를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!