Prototype.js가 텍스트 영역의 크기를 자동으로 조정하는 방법은 무엇입니까?

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

사용자 인터페이스를 디자인할 때 다양한 양의 텍스트를 수용할 수 있도록 텍스트 영역의 크기를 자동으로 조정하고 싶은 경우가 많습니다. JavaScript 프레임워크인 Prototype은 이 효과를 얻기 위한 간단한 솔루션을 제공합니다.

세로 크기 조정

세로 크기 조정은 텍스트 영역을 세로로 확장하거나 축소할 수 있는 실용적인 접근 방식입니다. 텍스트 줄 수를 기준으로 합니다. Prototype을 사용하여 이를 구현하려면 다음 코드를 사용할 수 있습니다.

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

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

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

이 코드에는 resizeIt 함수가 정의되어 있습니다. 줄 바꿈 문자에서 텍스트를 분할하고 잠재적인 단어 줄 바꿈을 고려하여 각 줄에 하나씩 추가하여 텍스트 영역의 줄 수를 계산합니다. 그런 다음 함수는 텍스트 영역의 행 속성을 계산된 줄 수로 설정합니다.

함수 활성화

크기 조정 동작을 활성화하려면 resizeIt 함수를 바인딩할 수 있습니다. 다음과 같은 방식으로 keyup 또는 keydown과 같은 이벤트를 수행합니다.

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

예 사용법

다음 예에서는 텍스트 영역에서 자동 크기 조정 기능을 사용하는 방법을 보여줍니다.

<textarea>

이 코드는 행 1개와 열 50개로 구성된 텍스트 영역을 생성하고 자동으로 크기를 조정합니다. 입력된 텍스트를 그대로 수용합니다.

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