모바일 웹 사이트가 있고 다음 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">
숫자 키패드가 표시되지 않습니다. 이건 버그 일거야 …
답변
inputmodeWHATWG 사양 에 따르면 기본 방법입니다.
iOS 장치의 경우 추가 pattern도 도움이 될 수 있습니다.
typeChrome은 버전 66부터 사용하기 때문에 이전 버전과의 호환성을 위해 사용 합니다.
<input
inputmode="numeric"
pattern="[0-9]*"
type="number"
/>
답변
일부 브라우저는 입력 유형이 “숫자”일 때 서버에 선행 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
