[JS/TS] input 태그에서 입력값이 최댓값을 넘어갔을 때

쿼카쿼카·2024년 3월 23일
0

JS / TS

목록 보기
14/14

코드

const MAXIMUM_NUMBER = 10; // 최대값
let inputNumber = 0; // 입력값

function handleMaxLengthInput(e: any) {
  // 빈 값이거나 숫자가 아니면 return
  if (e.target.value === "" || isNaN(Number(e.target.value))) {
    return;
  }
  // 입력값이 MAXIMUM_NUMBER보다 크거나 0일 때 
  else if (Number(e.target.value) > MAXIMUM_NUMBER || e.target.value === "0") {
    e.target.value = MAXIMUM_NUMBER.toString();
    inputNumber = MAXIMUM_NUMBER;
  }
  // 입력값이 최댓값을 넘어가지 않았을 때
  else {
    inputNumber = Number(e.target.value);
  }
}

e.target.value를 변경

  • 위 같은 상황으로 input태그 안의 값을 바꿔주고 싶다면 태그 속성 value의 값인 inputNumber가 아닌 e.target.value를 변경해줘야 한다. value값 따라가야하는 거 아님?
  • 그래서 최댓값을 정하고, e.target.value가 최댓값을 넘어갔을 땐 e.target.value도 변경해주고, 입력값인 inputNumber도 변경해주면 된다.
profile
쿼카에요

0개의 댓글