input tag 개행(줄바꿈) 안 될 때는 textarea tag로

✔️ 필요성

input tag를 이렇게 길게 지정해봐도 중간에 커서가 나오고 개행(줄바꿈)이 안된다. 이런저런 whitespace 옵션 다 바꿔봐도 안된다! 

css는 tailwind 사용

<input
    className={`block h-36 whitespace-pre-wrap w-full bg-white text-gray-700 border border-black py-2 px-2 mb-3 leading-tight focus:border focus:border-pz-pt-1 `}
    type="text"
    placeholder={placeholder}
    value={text}
    onChange={handleChange}
></input>

 

✔️ 문제 해결

input tag는 찾아보니까 무조건 한 줄만 받게 되어있다고 한다. 아무리해봐도 다 필요없었고 textarea tag 사용해주고 rows 지정해주면 끝!

 

<textarea
    className={`block whitespace-pre-wrap w-full bg-white text-gray-700 border border-black py-2 px-2 mb-3 leading-tight focus:border focus:border-pz-pt-1 `}
    rows={large ? 5 : 1}
    placeholder={placeholder}
    value={text}
    onChange={handleChange}
/>

 

 

 

(참고)

ㄴㅏ중에 DB로 넘길때는 아래 블로그 참조하자

https://tried.tistory.com/95