Android의 모바일 웹 사이트에서 숫자로 키보드를 강제하는 방법

Android의 모바일 웹 사이트에서 숫자로 키보드를 강제하는 방법

---

모바일 웹 사이트가 있고 여기 input에 다음과 같은 HTML 요소가 있습니다.

<input type="text" name="txtAccessoryCost" size="6" />

WebView가능한 Android 2.1 사용을 위해 사이트를에 포함 시켰 으므로 Android 애플리케이션도 될 것입니다.

이 HTML input요소에 초점을 맞출 때 문자가있는 기본 키보드 대신 숫자가있는 키보드를 얻을 수 있습니까?

또는 HTML 요소에 대해 실행 가능하지 않은 경우 전체 응용 프로그램에 대해 설정할 수 있습니까 ( Manifest 파일 에있을 수 있음)?

---

<input type="number" />
<input type="tel" />

둘 다 입력이 포커스를받을 때 숫자 키패드를 표시합니다.

<input type="search" /> 추가 검색 버튼이있는 일반 키보드 표시

다른 모든 것은 표준 키보드를 불러오는 것 같습니다.

---

중요 사항

이것은 다소 중요한 정보이고이 형식으로 더 많은 관심을 끌 것이기 때문에 이것을 코멘트가 아닌 답변으로 게시하고 있습니다.

다른 동료들이 지적했듯이 장치에 type="number"/ 를 사용하여 숫자 키보드를 표시하도록 강제 할 수 type="tel"있지만 이에 대해 매우주의해야합니다.

누군가 0으로 시작하는 숫자 (예 :)를 예상하는 경우 000222일부 브라우저 (예 : 데스크톱 Chrome)에서 222원하는 것이 아닌 서버로 전송하므로 문제가있을 가능성이 높습니다 .

소개 type="tel"나는 아무것도 비슷한 말할 수 있지만, 다른 전화기에서의 행동이 다를 수 있기 때문에 개인적으로는 사용하지 마십시오. 나는 pattern="[0-9]*"안드로이드에서 작동하지 않는 단순한 것에 자신을 한정했습니다.

---

작동합니다. 하지만 안드로이드 폰에서도 같은 문제가 있습니다.

<input type="number" /> <input type="tel" />

jquerymobile-framework를 포함하지 않으면 키패드가 두 가지 유형의 필드에 올바르게 표시된다는 것을 알았습니다.

하지만 정말 jquerymobile을 사용해야한다면 그 문제를 해결할 해결책을 찾지 못했습니다.

업데이트 : 양식 태그가 외부에 저장되면

<div data-role="page"> 

숫자 키패드가 표시되지 않습니다. 이건 버그 일거야 ...

---

일부 브라우저는 입력 유형이 "숫자"일 때 서버에 선행 0을 전송합니다. 따라서 jquery와 html을 혼합하여 숫자 키패드를로드하고 값이 숫자가 아닌 텍스트로 전송되는지 확인합니다.

$(document).ready(function(){
$(".numberonly").focus(function(){$(this).attr("type","number")});
$(".numberonly").blur(function(){$(this).attr("type","text")});
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numberonly">

---

input type = number

숫자 입력을 제공하려는 경우 HTML5 input type = "number"속성 값을 사용할 수 있습니다.

<input type="number" name="n" />

다음은 iPhone 4에 나오는 키보드입니다.

HTML5 입력 유형 번호의 iPhone 스크린 샷 Android 2.2는 type = number에이 키보드를 사용합니다.

HTML5 입력 유형 번호의 Android 스크린 샷

---

숫자 입력에 단계 속성 추가

<input type="number" step="0.01">

출처 : http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html

참고 URL : https://stackoverflow.com/questions/3372380/how-to-force-keyboard-with-numbers-in-mobile-website-in-android