프로토타입을 사용하여 자동 크기 조정 TextArea 구현

내부 판매 애플리케이션에서 사용자 경험을 향상하려면 자동 크기 조정 기능을 배송 주소에 사용되는 텍스트 영역입니다. 이를 달성하기 위한 자세한 지침은 다음과 같습니다.

목표는 텍스트 입력을 수용하기 위해 높이를 동적으로 조정하여 최적의 공간 활용과 가독성을 보장하는 텍스트 영역을 만드는 것입니다. 이를 위해 JavaScript 프레임워크인 Prototype을 활용하겠습니다.

먼저 페이지에 필요한 JavaScript 코드를 추가합니다.

resizeIt = function() {
  var str = $('iso_address').value;
  var cols = $('iso_address').cols;
  var linecount = 0;

  $A(str.split("\n")).each(function(l) {
    linecount  = 1   Math.floor(l.length / cols); // Consider long lines
  })

  $('iso_address').rows = linecount;
};

이 코드는 문자 수, 열 너비 및 줄 바꿈을 기반으로 텍스트 영역의 텍스트 줄 수를 계산합니다. 결과 값은 텍스트 영역의 "rows" 속성에 할당되어 효과적으로 크기가 조정됩니다.

자동 크기 조정을 활성화하려면 resizeIt 함수를 적절한 이벤트에 연결하세요. 예를 들어, keyup을 사용하여 텍스트 입력 변경 사항을 캡처할 수 있습니다.

Event.observe('iso_address', 'keyup', resizeIt);

텍스트 영역이 처음 로드되면 resizeIt 함수를 호출합니다. 높이를 초기화하려면:

resizeIt();

이 구현을 사용하면 텍스트 영역이 높이를 자동으로 조정합니다. 사용자 유형을 지정하여 양식의 수직 공간을 최적화하고 주소 정보가 읽기 쉬운 방식으로 표시되도록 합니다.