CSS field-sizing 사용법 - 늘어나는 textarea

늘어나는 Textarea

Tailwind CSS 4.0 에서 field-sizing-content 이 값만 넣어주면 다음과 같이 간단하게 구현이 된다.

<textarea
name="description"
class="field-sizing-content w-full text-base min-h-[430px] bg-gray-50 text-gray-800 font-mono border border-gray-200 focus:ring-3 ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2"
placeholder="Markdown supports, Cmd or Ctrl + Enter to save."
bind:value={descriptionValue}
onkeydown={(e)=>{

    // Ctrl + Enter or Cmd + Enter
    if ( (e.metaKey || e.ctrlKey) && e.key === 'Enter' ) {
        saveDescriptionTextarea();
        return;
    }

    // ESC
    if ( e.key === 'Escape' ) {
        cancelDescriptionTextarea();
        return;
    }
}}
>...

한가지, Svelte 에서는 bind:this={descriptionTextareaEl} 로 bind:this 를 지정하면 field-sizing-content이 동작하지 않는다.

let descriptionTextareaEl = $state({} as HTMLElement);

<textarea
name="description"
class="w-full text-base min-h-[430px] bg-gray-50 text-gray-800 font-mono border border-gray-200 focus:ring-3 ring-indigo-300 rounded outline-none transition duration-100 px-3 py-2"
placeholder="Markdown supports, Cmd or Ctrl + Enter to save."
bind:this={descriptionTextareaEl}
bind:value={descriptionValue}
onkeydown={(e)=>{

    // Ctrl + Enter or Cmd + Enter
    if ( (e.metaKey || e.ctrlKey) && e.key === 'Enter' ) {
        saveDescriptionTextarea();
        return;
    }

    // ESC
    if ( e.key === 'Escape' ) {
        cancelDescriptionTextarea();
        return;
    }
}}

oninput={(e)=>{

    isDescriptionEditing = true;

    if ( e.target ) {


        e.target.style.height = '0px';
        e.target.style.height = e.target.scrollHeight + 2 + 'px' ; // Adjust

    }

}}
>...

Focus 하기

Svelte 에서 bind:this를 지정하지 않았기 때문에 다음과 같이 Focus 를 해야한다.

await tick();
document.querySelector("[name='description']")?.focus();;

기존 방법으로는 descriptionTextareaEl변수를 사용하면 된다.

await tick();
descriptionTextareaEl.focus();

if ( descriptionValue ) {

    descriptionTextareaEl.style.height = '0px';
    descriptionTextareaEl.style.height = descriptionTextareaEl.scrollHeight + 2+ 'px'; // Adjust

}

동작을 간단하게 확인하기 위헤서 온라인에서 웹페이지를 바로 제작할 수 있는 Essepage 를 이용하면 편리하다.

웹 개발의 모든것을 온라인에서 끝내다
https://essepage.com