반응형

안녕하세요!

오늘은 업데이트가 많아 퇴근이 늦은 Milkye입니다 :)



오늘 소스를 수정하다가 갑자기 요청이 들어오는 바람에 수정을 하게 된 소스입니다.

HTML에서 [ Input ]은 여러가지 type으로 사용을 할 수 있는데, 오늘은 그 중에서 number속성을 가지고 최대길이(maxlength)를 설정을 해보도록 하겠습니다.


 기본적으로 input의 type이 text일땐, maxlength를 지정해주면 최대 글자 수를 지정을 할 수 있지만 number는 그렇지가 않습니다. 그래서 다른 방법을 통해 최대 글자 수를 정해줘야 하죠.


바로 요렇게 말입니다.



우리가 볼 부분은 function 부분이 되겠네요!

아래 이미지를 보시면 Local Date와 Time 그리고 Number에서는 maxlength가 적용이 안되는 것을 보실 수 있습니다.


그렇기에  function을 이용해서 강제로 자릿수를 맞춰줄거에요!


현재 value의 길이와 input에서 정의한 maxlength의 길이와 비교를 하여서 더 크다면, maxlength의 길이만큼 언제?! oninput 상태일 때 잘라버리겠다! 라는 뜻을 가진 함수입니다.


이렇게 하시면 쉽게 숫자도 자릿수 제한을 두고 사용을 하실 수 있을거에요!

이 방법은 핸드폰 번호를 4자리로 잘라낼 때, 유용하게 사용을 하실 수 있습니다!


그럼 안뇽!!




반응형
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기