Alpine JS로 Textarea를 자동으로 확장하는 방법(+ 새 플러그인)

개발 경력의 어느 시점에서 사용자가 입력한 값으로 자동 증가<textarea>하도록 요청받을 가능성이 큽니다.

이 기능을 만들 때 취할 수 있는 몇 가지 접근 방식이 있지만 가장 일반적인 것은 이와 유사한 JavaScript 함수입니다.

function textareaAutogrow() {
  let el = event.currentTarget

  el.style.height = 'auto'
  el.style.height = `${el.scrollHeight}px`
}

간단하고 깨끗하며 사용하기 쉽습니다.

이것을 Alpine JS로 어떻게 번역합니까?

JavaScript 예제와 동일한 코드를 사용하지만 Alpine JS로 작성된 솔루션부터 시작하겠습니다.

기본 Alpine JS 예제

<textarea
  x-data="{
    resize: () => {
      $el.style.height = 'auto';
      $el.style.height = `${$el.scrollHeight}px`
    }
  }"
  x-init="resize()"
  @input="resize()"
></textarea>

무슨 일이야?

JavaScript 예제와 동일한 논리를 갖는 x-data 함수를 초기화하는 resize() 컨텍스트가 있습니다. 이 함수는 Alpine JS 구성 요소가 초기화될 때 호출되고 input DOM 이벤트가 전달될 때마다 다시 호출됩니다.

좋습니다. 이것은 작동하지만 JavaScript 예제의 세 상자를 체크합니까?

단순한

예. x-data 컨텍스트에서 함수 생성을 제외한 표준 Alpine JS입니다.

깨끗한

아니요. HTML에 추가 복잡성과 부풀림이 추가되어 빠르게 읽기가 훨씬 더 어려워집니다.

재사용 가능/쉬움

아니요. 그것은 DRY가 아니며 특히 상황이 자주 변경될 수 있는 HTML에서 사용하고 싶지 않은 것입니다.

Alpine JS 로직 추출 예제

방금 작성한 논리를 자체 Alpine JS 데이터 컨텍스트 함수로 추출해 보겠습니다. 다음과 같습니다.

<textarea x-data="grow"></textarea>

그리고 Alpine JS 지시문.

document.addEventListener('alpine:init', () => {
  Alpine.data('grow', () => ({
    init() {
      this.resize()
      this.$el.addEventListener('input', () => this.resize())
    },
    resize() {
      this.$el.style.height = 'auto'
      this.$el.style.height = `${this.$el.scrollHeight}px`
    },
  }))
})

이게 훨씬 좋아 보인다!

이 접근 방식으로 처리하면 기능을 반복해서 작성하지 않고도 x-data="grow"를 추가할 수 있습니다. 그러나… 다음 예를 들어 보겠습니다.

<textarea
  x-data="{ valid: false, grow }"
  :class="{ 'border-green-500': valid }"
></textarea>

여기에는 CSS 클래스 추가/제거를 처리하는 valid: false가 있습니다.

CSS가 작동합니까? 예.

자동 증가 기능이 작동합니까? 아니.

이 문제를 해결할 수 있는 방법이 있을 수 있지만 지금은 다른 솔루션이 있습니다.

Alpine JS 플러그인 예제

Alpine JS 지시문으로 이 기능을 처리하는 Alpine JS 플러그인Alpine JS Textarea Autogrow을 만들었습니다.

이것이 의미하는 바는 이 기능을 이와 같이 추가할 수 있다는 것입니다.

<textarea x-data x-grow></textarea>

여기서는 Alpine JS 구성 요소를 초기화하는 데 필요한 x-data로 Alpine JS 구성 요소를 초기화합니다. 그런 다음 자동 성장 기능을 처리하기 위해 플러그인에서 제공하는 Alpine JS 지시문인 x-grow를 사용합니다.

후드 아래x-grow는 이 블로그 게시물의 시작 부분에 표시된 JavaScript 예제입니다.

"이런 용도로 플러그인을 사용하는 이유는 무엇입니까?"입니다. 좋은 질문입니다. 몇 가지 이유가 있습니다.

심플하고 깨끗하며 사용하기 쉬운

HTML 팽창 없음

매우 작은 JavaScript 패키지(0.000344MB)

x-data 전체 사용 허용

이 모든 예에는 사용 사례가 있지만 최선에서 최악의 접근 방식 목록을 작성한다면 그렇게 될 것입니다.

Alpine JS 플러그인 - Alpine JS Textarea Autogrow

Alpine JS 로직 추출

자바스크립트

베이직 알파인JS