textarea 최대 입력 글자 수 제한 - maxLength, onKeyDown, byte

maxLength

maxLength로 textarea에 입력할 수 있는 최대 문자수 명시

onKeyDown 함수 제어

onKeyDown을 이용해 입력되는 값의 길이가 maxLength를 넘을 때 string 자르기

string자르기 3가지 방법 - substring,substr,slice

    const lengthCheck =(maxLength:number) => {
        if(info.length>maxLength) {
            setInfo(info.substr(0,maxLength))
        }
    }

    ...
    <textarea cols={30} rows={3} placeholder="특이 사항을 입력해주세요 (선택/최대28자)"
              maxLength={28}
              onKeyDown={e=>lengthCheck(28)}
              value={info?info:''}
              onChange={e=>setInfo(e.target.value)} 
    ></textarea>

onKeyDown 함수 제어 - Byte 계산

입력문자	byte
한글 한글자	2byte
영어 알파벳 하나	1byte
공백, 문장부호	1byte

    const lengthCheck =(maxByte:number) => {

      let totalByte=0;
      for(let i=0; i<info.length; i++){
          const uni_char = escape(info.charAt(i)) //유니코드 형식으로 변환
          if(uni_char.length>4){ // 한글 2byte
              totalByte += 2;
          }else{ // 영문,숫자,특수문자 : 1Byte
              totalByte += 1;
          }
      }
      if(totalByte > maxByte){
           // 초과 알림
      }
    }

    ...
    <textarea cols={30} rows={3} placeholder="특이 사항을 입력해주세요 (선택/최대28자)"
              maxLength={28}
              onKeyDown={e=>lengthCheck(28)}
              value={info?info:''}
              onChange={e=>setInfo(e.target.value)} 
    ></textarea>