모바일 친화적 인 숫자 + 공백 문자열 입력 (신용 카드 번호)

Question

모바일 및 모바일이 아닌 브라우저에서 모두 사용할 신용 카드 번호 입력 양식이 있습니다.

휴대 전화에 키패드가 나타나야하고 (선택 사항) 공백을 허용해야하므로 '4111 1234 1234 1234'또는 '4111123412341234'중 하나를 받아 들여야합니다. 이것이 내가 적어도) 현재 모바일 브라우저 (원하는대로 행동하는 것 같다,하지만 의미 잘못 -

가

A) <input type="tel"/>이 : 내가 발견 한 것을에서

는 옵션이 있습니다.

B) <input type="text" pattern="[\d ]*"/> 또는 유사한 - iPhone recognises some patterns ([0-9]*, \d*) 키보드 작업으로, 그러나 이것은 안드로이드에 잘 작동하지 않습니다. 또한 나는 아이폰이 그 공간을 허용하기 위해 숫자 패드를 줄 것이라는 어떤 패턴이 있는지 확신하지 못한다. 지금 당장 아이폰을 확인하지는 않는다.

c) Javascript로 브라우저 검색을 시도하고 모바일 용 (a) 및 모바일 용 (b)를 사용하십시오. Cludgy, 그리고 (a) 이상의 실질적인 이점.

<input type="number"/>은 Chrome at least will force such input to a number부터 시작하지 않으므로 입력을 공백으로 구분합니다.

type="tel"을 사용하는 것보다 휴대 전화 브라우저에 숫자 패드를 제공하는 것이 더 좋은 방법이 있습니까?

편집 :

어쩌면 숫자 키패드가 표시되어야 함을 암시하는 일반 텍스트 입력 필드에 적용 할 수있는 -webkit-* 재산?

Answer 1

나는 자동으로 숫자를 문자로 전환하지 않고 숫자와 공백을 허용하는 키보드 레이아웃이 iPhone에 없다는 것을 알고 있습니다. 사이에 공백이있는 숫자를 입력하면 각 공백 다음에 숫자 키보드 레이아웃으로 반복적으로 전환해야합니다.

네 개의 숫자 블록에 대해 개별 입력 필드를 제공하고 네 번째 숫자가 입력 된 후 자동으로 한 입력 필드에서 다음 입력 필드로 커서를 이동 시키려면 javascript를 사용하면 <input type="number"/>을 사용할 수 있습니다. iPhone 사용자가 키보드 레이아웃을 전환하지 못하게합니다.

Answer 2

여전히 공백 및 기타 특수 문자를 포함 할 수있는 텍스트 필드의 의미 올바른 마크 업 그러나 지금까지 inputmode이가 아직 브라우저에서 지원되지 않는 WhatWG에서 권장하는 동안 내가 아는 <input type="text" inputmode="numeric"/>입니다. 그것의 의도는 숫자 키패드가있는 장치에 사용자를 나타내지 만 여전히 텍스트 입력으로 동작합니다.

내 제안은 inputmode을 JS로 polyfill하고 터치 장치에서 type="tel" (현재 사용 가능한 최상의 솔루션)으로 변경하는 것입니다. 기기마다 'tel'와 'number'키패드가 매우 다르다는 점에 유의하십시오. iOS 'tel'는 공백을 허용하지 않지만 Chrome 모바일은 모든 특수 문자를 허용합니다. 맞춤 Android 키패드가 어떤 작업을하는지 누가 알 수 있습니까? 당신이 당신의 자신의 polyfill을 구축하지 않으려면

당신은 지금 release 1.14.0의 같은 inputmode polyfills Webshim을 구현할 수 있습니다.(! :이 type="number"를 설정할 때 얻을 같은 키패드 아닌 주) 여기

난에 한 분석은 또한 가지고이 원하는 경우 pattern="[0-9]*"를 설정하여 호출 한 아이폰 OS '숫자'키패드를 유지하는 좋은 기능을 가지고 input type behavior across browsers 및 polyfilling inputmode에 @aFarkas (Webshim 작성자)가있는 debate입니다.