(1) 숫자만 입력받기
일반적으로 input type에 number를 입력할 수 있지만 단점이 있다.
입력한 문자가 value에 들어가진 않는데 화면에 입력한 값이 보이며 특수문자 또한 입력이 가능하다.
그래서 number type을 사용하지 않고 정규식을 이용해 사용자가 입력한 문자값은 아예 볼 수 없도록 설정한다.
이때 input event를 사용하는데 일반적으로 key를 입력받으면
(1)keydown -> (2)keypress -> (3)input -> (4)keyup
이 순서로 이벤트가 일어나며 event.target.value에 3번부터 값이 들어온다.
그리고 실제로 사용자 화면에 출력되는 이벤트는 4번부터다.
즉, input 이벤트에서 value에 문자열이 입력되는 순간 사용자 눈에 보이기도 전에
정규식으로 삭제해버릴 수 있다.
<label for="date">날짜 : </label>
<input type="text" id="date" oninput="onlyNumber()" >function onlyNumber(){
const reg = /\D/g;
event.target.value = event.target.value.replace(reg, "");
}(2) 자동 하이픈 추가
타사이트에서 숫자만 입력받아 하이픈은 자동으로 추가 삭제되는 기능이 멋져보여서 이것까지 구현해보려 한다.
구현 목표
- 사용자는 숫자만 입력 가능(문자열, 하이픈 입력 불가)
- 숫자 길이에 따라 하이픈(-)은 자동으로 추가/삭제
let date = document.querySelector("#date");
// 문자열, 하이픈을 막기 위해 input event 사용
date.addEventListener("input", () => {
// 사용자 입력값은 모두 숫자만 받는다.(나머지는 ""처리)
let val = date.value.replace(/\D/g, "");
let leng = val.length;
// 출력할 결과 변수
let result = '';
// 5개일때 - 20221 : 바로 출력
if(leng < 6) result = val;
// 6~7일 때 - 202210 : 2022-101으로 출력
else if(leng < 8){
result += val.substring(0,4);
result += "-";
result += val.substring(4);
// 8개 일 때 - 2022-1010 : 2022-10-10으로 출력
} else{
result += val.substring(0,4);
result += "-";
result += val.substring(4,6);
result += "-";
result += val.substring(6);
}
date.value = result;
})
코드펜에 유효성 체크와 함께 정리해보았다.
