[Vue] Textarea 줄바꿈 제한하기

textarea에서 사용자 입력을 제한할 때, 단순한 maxlength만으로는 줄 수 제어가 되지 않아 직접 로직을 구현해 보았다.

---

1. keydown.enter 이벤트로 줄바꿈 방지

Enter 키 입력을 감지하여 줄 수를 초과하면 줄바꿈을 막는 방식을 시도했다.

@keydown.enter="checkEnter($event, 5)"

 

checkEnter 함수에서는 현재 입력값의 줄 수를 계산하여 5줄 이상일 경우
event.preventDefault()로 줄바꿈을 막고, 에러 메시지를 노출했다.

const checkEnter = (event: KeyboardEvent, maxLine: number) => {
  const target = event.target as HTMLTextAreaElement;
  const value = target.value;
  const lines = value.split('\n');

  if (lines.length >= maxLine) {
    event.preventDefault();
    // 오류 메세지
  }
};

 

이렇게 하면 사용자가 Enter 키로 줄을 넘기는 것은 막을 수 있어도, 여러 줄이 포함된 텍스트를 붙여넣는 경우는 막을 수 없었다.

 

2. beforeinput 이벤트로 붙여넣기까지 감지

붙여넣기로 줄바꿈이 되는 문제점을 보완하기 위해 @beforeinput 이벤트를 활용했다.

@beforeinput="checkInput($event, 5)"

 

beforeinput은 입력 이벤트를 사전에 감지할 수 있는 이벤트다.

checkInput에서는 현재 입력값과 새로 입력될 값을 더한 다음, 줄 수를 초과하는 경우 preventDefault()로 입력을 차단했다.

const checkInput = (event: InputEvent, maxLine: number) => {
  const target = event.target as HTMLTextAreaElement;
  const value = target.value + event.data;
  const lines = value.split('\n');

  if (lines.length > maxLine) {
    event.preventDefault();
   	// 오류 메세지
  }
};