HTML5 숫자 입력 필드에 하이픈 허용하기
HTML5의 input 요소에서 숫자와 함께 하이픈(-)도 입력받고 싶다면 정규 표현식(regular expression)을 활용하면 됩니다.
1. pattern 속성에 정규 표현식 추가
아래와 같은 정규 표현식을 pattern 속성에 넣어주세요.
[0-9]+([-\][0-9]+)?
이 정규 표현식의 의미는 다음과 같습니다.
[0-9]+: 숫자가 하나 이상 연속으로 입력되어야 함([-\][0-9]+)?: 하이픈(-) 또는 쉼표(,) 뒤에 숫자가 이어지는 형태가 선택적으로 허용됨
2. 실제 코드에 적용하기
위 정규 표현식을 실제 마크업에 적용하면 다음과 같습니다.
<input type="text" pattern="[0-9]+([-\][0-9]+)?" name="my-num" title="하이픈 또는 쉼표 입력 가능"/>
위 코드를 사용하면 숫자 입력 시 하이픈을 포함한 값도 유효성 검사를 통과하게 됩니다.
주의 사항
이 방법이 정상적으로 작동하려면 input 유형을 반드시 type="text"로 지정해야 합니다. type="number"로 설정하면 pattern 속성이 적용되지 않기 때문에, 숫자 형식 검증은 pattern 속성의 정규 표현식이 대신 담당하게 됩니다.