HTML5 number 입력 타입에서 선행 0이 사라지는 문제 해결 방법

HTML5 number 입력 타입의 선행 0 문제

HTML5에서 type="number"를 사용하면 값 앞에 붙은 0(선행 제로)이 자동으로 제거되는 문제가 발생할 수 있습니다. 특히 국제 전화번호처럼 맨 앞의 0이 의미를 가지는 값을 입력받아야 할 때 이 문제가 두드러집니다.

이 문제를 해결하는 대표적인 방법은 number 대신 tel 타입을 사용하고, 숫자만 입력 가능하도록 pattern 속성을 지정하는 것입니다.

<input type="tel" pattern="[0-9]*">

iOS(iPhone): 위 코드를 사용하면 숫자 키패드만 표시되는 숫자 전용 키보드가 나타나며, 선행 0도 그대로 유지됩니다.

Android: 안드로이드 기기에서는 tel 타입은 올바르게 인식되어 전화번호 키보드가 호출되지만, pattern 속성은 일부 기기에서 무시될 수 있습니다.

또 다른 방법으로 text 타입에 동일한 패턴을 적용할 수 있습니다.

<input type="text" pattern="[0-9]*" ...>

위 코드는 iPhone과 Android 기기 모두에서 숫자 키패드를 호출하여 화면에 표시합니다. 이렇게 하면 선행 0이 삭제되지 않고 그대로 보존되므로, 국제 전화번호나 우편번호처럼 앞자리 0이 필요한 데이터를 안전하게 입력받을 수 있습니다.