프로토타입을 사용하여 텍스트 영역의 크기를 수직으로 자동 조정하는 방법은 무엇입니까?

프로토타입을 사용하여 텍스트 영역 자동 크기 조정

콘텐츠에 따라 텍스트 영역의 크기를 자동으로 조정하여 사용자 경험을 향상한다는 개념을 확장하여 사용하여 상세한 솔루션 프로토타입.

세로 크기 조정 구현

다양한 줄 길이를 수용하려면 세로 크기 조정이 실행 가능한 옵션임이 입증되었습니다. 텍스트가 차지하는 줄 수를 계산하여 그에 따라 텍스트 영역의 행을 조정할 수 있습니다.

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); // Take into account long lines
  })

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

키 입력을 위한 이벤트 리스너

매번마다 적시에 크기가 조정되도록 보장합니다. 키를 누르면 이벤트 리스너를 textarea:

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

가로 크기 조정 고려 사항

가로 크기 조정이 바람직해 보일 수 있지만 줄 바꿈 및 긴 줄로 인해 문제가 발생하여 잠재적으로 레이아웃 문제가 발생할 수 있습니다. 따라서 대부분의 경우 세로 크기 조정이 선호됩니다.

통합 예제

제공된 HTML JavaScript 예제에서는 실제 설정에서 자동 크기 조정 기능을 보여 주며 텍스트 영역을 활성화합니다. 사용자의 텍스트 입력 변경에 따라 세로 크기를 조정합니다.

위 내용은 프로토타입을 사용하여 텍스트 영역의 크기를 수직으로 자동 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!