2011-12-08 4 views
29

Chrome 15에서 요소를 텍스트 입력란으로 사용하면 입력 한 숫자가 유효성 검사 규칙 (예 : 최소, 최대)을 위반하지 않아도 앞에 0이 제거됩니다. 초점을 잃은 후에도 영 (zero)이 필드에 남아 있도록하는 속성이 있습니까? 이 응용 프로그램은 국제 전화 접두사와 같은 숫자 데이터입니다.HTML5 입력 유형 = 번호로 선행 0을 제거합니다.

+0

이 양식은 어떻게 구성되어 있습니까? 숫자가 하나의 텍스트 필드에 들어가거나 별도의 텍스트 필드에 있습니까? – Edwin

+0

이 양식은 꽤 표준적인 양식입니다. 텍스트, 라디오, 수표, 날짜 및 번호를 포함한 다양한 입력란이있는 여러 필드. 이 특별한 경우에는 우편 번호와 같은 숫자 필드에 숫자를 사용하고 싶습니다. – Evan

답변

26

<input type="tel">이 정확한 목적으로 도입되었습니다. HTML5의 새로운 입력 유형 중 하나입니다.

+3

제안에 감사드립니다! 그러나 우편 번호와 기타 정보 용 숫자 필드가있어서 앞에 오는 0이 중요합니다. 가능한 한 시맨틱 스로서 마크 업을 만들고 싶습니다. 특정 사용에 상관없이 제로를 유지할 수있는 방법을 찾고 있습니다. 일반 유형 = 입력 – Evan

+0

'number'는 분명히 무엇을하지 않습니다. 너는 필요하고'tel'는. 선행 번호를 삭제하지 않는 속성이 있는지 묻습니다. 음 : 'tel'가 답입니다. 또한 입력 유형은 의미론과 사용자 인터페이스 (키보드가 스마트 폰에 표시되는 등)에 대한 정보가 적습니다. –

+0

'\ d {5} -? (\ d {4})? '패턴을 사용하면 우편 번호에 매우 효과적입니다. – Lefka

4

WHATWG에서 IRC에 제공 한 대답은 실제로 숫자가 아닌 숫자가 아닌 (예 : float/int가 아닌) 데이터의 경우 텍스트가 일반적으로 올바른 입력 유형입니다. 특정 입력 유형 (예 : 전화 번호, 날짜)이 이미있는 곳에서 무언가를 사용하는 경우 이탈이 발생합니다.

입력 유형 = 숫자는 문자 그대로 숫자 (int)이며 숫자를 사용하는 데이터 (예 : 우편 번호)가 아닌 입력에만 사용해야합니다. 당신을 위해 무엇을해야

+10

그들의 아이보리 타워 pontification 모두 잘되고 있지만, 현실 세계로 돌아 가면, 정수가 아닌 비 플로트 데이터의 경우에도 종종 숫자 키보드를 모바일 사용자에게 제시해야합니다. (예 : 신용 카드 번호, 숫자 패스 코드.) 아직 한 브라우저가 'inputmode' 속성을 구현하지 않았으므로 (2015 년 기준!), type 속성이이를 수행하는 유일한 방법입니다. WHATWG의 권장 사항을 따르는 것의 실질적인 효과는 무의식적으로 모바일 사용자를위한 UI를 깨는 것이고, 독단적 인 태도에 만족 한 것 외에는 얻지 못하는 것입니다. –

37

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

. iPhone에서 숫자 키패드를 테스트하고 내가 테스트 해 본 더 멋진 Android 휴대 전화를 가져옵니다.

+2

모바일 키보드에서 얻을 수있는 전화 엑스트라 ('#'및'* '등)를 원하지 않으면 이것이 진정한 해답입니다. –

+13

Chrome과 함께 Android에 텍스트 키패드가 나타납니다. – chhantyal

+1

IE에서 작동합니까? –

14

나는 모바일 브라우저를 필요로하고이 같은 두 솔루션의 혼합 사용 :

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

, 숫자 키보드는 안드로이드 폰에 반면 가능 (NO # 또는 * 문자) 만 숫자 표시를 , "전화"는 정확하게 해석되지만 패턴은 아닙니다 (아직 가지고있는 몇 대의 전화기에는 없습니다).

안드로이드 브라우저가 "패턴"속성을 구현하기 시작할 때,이 역시 안드로이드에서도 잘 작동해야한다고 생각합니다 (the whatwg spec suggests).

그 때까지 입력에서 숫자가 아닌 문자가 있는지 확인하고 제거해야합니다. 자바 스크립트 바꾸기 (/ [^ 0-9 *]/g, '')는 유용합니다.

희망 하시겠습니까?

+0

고맙다 그것은 ios와 android ...를 위해 잘 작동한다. .. :) – Kailas

관련 문제