[vue] 입력 폼 - 한글 입력 글자 갯수 제한

한글을 입력하다보면 한글자가 더 입력된 다음에야 maxlength가 적용된다. 6글자 제한이면 7글자 입력후 트림처리되어 6글자가 됨.

이를 개선하려면 이벤트에서 max값을 비교하여 처리해 줘야 함.

    const inputHandler = (e:any) => {
      const target = e.currentTarget;
      const max = e.currentTarget.getAttribute('maxlength');
      if (target.value.length > max) {
        target.value = target.value.slice(0, max);
      }
      customString.value = target.value;
    };

이를 호출하는 html

        <input
          class="inputBox"
          type="text"
          name="name"
          placeholder="6자 이내로 입력해주세요."
          :value="customString"
          @input = "inputHandler"
          maxlength="6"
          @keyup.enter="keyPress"
        />