Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML 입력 요소가 스마트폰에서 숫자 키보드를 표시하도록 하는 방법

저는 교육 로거 작업을 하고 있습니다. 앱을 지난 6개월 동안 부 프로젝트로 사용했습니다. 예상대로 이러한 앱에는 숫자 입력이 필요합니다.

코드 편집기에서 자동 완성을 사용하는 경우 입력 요소의 기본 유형은 텍스트입니다.

<input type="text" />

숫자 유형의 HTML 입력 요소는 숫자 입력만 허용합니다. 이 숫자 입력 필드에 문자를 입력해 보십시오.

할 수 없습니다.

텍스트 유형의 HTML 입력 요소 그러나 텍스트와 숫자를 모두 허용합니다. 이 텍스트 입력 필드에 숫자와 문자를 모두 입력해 보십시오.

예, 작동합니다!

처음에 앱에서 반복수와 무게에 대한 입력을 선언했을 때 기본 입력 유형을 텍스트에서 숫자로 변경하지 않았습니다. 나는 그것에 대해 생각하지도 않았다. 데스크톱 컴퓨터에서 테스트할 때 숫자를 입력하는 것이 쉽기 때문에 번거롭지 않았습니다.

하지만 iPhone 6에서 앱을 테스트하자마자 처음부터 올바른 입력 유형을 사용해야 하는 이유가 분명해졌습니다.

입력 요소의 유형이 텍스트로 설정되어 있고 최소한 iPhone에서 해당 입력 필드를 클릭하면(Android에서도 유사한 것으로 의심됨) 기본 키보드가 팝업됩니다. 누군가에게 문자 메시지를 보내는 것처럼.

다음과 같이:

HTML 입력 요소가 스마트폰에서 숫자 키보드를 표시하도록 하는 방법

이제 이 기본 키보드를 사용하여 숫자에 액세스할 수 있지만 먼저 123 버튼을 클릭해야 합니다. 이것은 불필요한 단계를 추가합니다.

반복 수와 중량을 추가하는 것이 유일한 목적인 입력 필드의 경우 스마트폰에서 숫자 키보드를 팝업하는 것만이 합리적입니다.

그렇게 하려면 입력 요소가 숫자 입력을 허용하도록 지정하기만 하면 됩니다.

다음과 같이:

<input type="number" />

결과(iOS 기기에서):

HTML 입력 요소가 스마트폰에서 숫자 키보드를 표시하도록 하는 방법

그리고 그게 전부입니다!