iPhone / iOS : 우편 번호 용 HTML 5 키보드 제시

iPhone / iOS : 우편 번호 용 HTML 5 키보드 제시

---

HTML 5 입력 (예 : <input>태그)을 위해 모바일 장치에 다른 키보드를 표시하는 몇 가지 트릭이 있습니다 .

예를 들어, 일부는 Apple 웹 사이트 인 웹보기 용 키보드 구성 에 문서화되어 있습니다.

이것은 유용성에 좋지만 국제 우편 번호 (대부분 숫자이지만 문자는 허용됨)에 대한 입력과 관련하여 몇 가지 좋지 않은 옵션이 남아 있습니다. 대부분의 사람들 pattern="\d*"은 숫자 키보드를 표시하기 위해 트릭을 사용하는 것이 좋지만 문자 입력은 허용하지 않습니다.

type="number"입력 타입 쇼 일반 키보드하지만 숫자 레이아웃으로 이동 :

이것은 iOS 기기에서 잘 작동하지만 Chrome은 입력이 숫자 여야한다고 생각하고 입력의 동작을 변경합니다 (값 증가 / 감소).

iOS를 숫자 레이아웃으로 기본 설정하지만 여전히 영숫자 입력을 허용하는 방법이 있습니까?

기본적으로 iOS 동작을 원 type="number"하지만 필드가 데스크톱 브라우저의 일반 텍스트 필드처럼 동작하기를 원합니다. 이것이 가능한가?

최신 정보:

iOS 용 사용자 에이전트를 스니핑하고 type="number"입력 유형을 사용하는 것은 옵션이 아닙니다. type="number"는 문자열 값 (우편 번호와 같은)을 의미하지 않으며 우편 번호에 적합하지 않게 만드는 다른 부작용 (예 : 선행 0 제거, 쉼표 구분 기호 등)이 있습니다.

---

작동할까요?

HTML :

<input type="tel" pattern="[0-9]*" novalidate>

이렇게하면 Android / iOS 휴대폰 브라우저에서 멋진 숫자 키보드가 제공되고, 데스크톱 브라우저에서 브라우저 양식 유효성 검사를 비활성화하고, 화살표 스피너를 표시하지 않고, 선행 0을 허용하고, 데스크톱 브라우저와 iPad에서 쉼표와 문자를 사용할 수 있습니다.

Android / iOS 휴대 전화 :

데스크탑 :

iPad :

---

현재 브라우저에는 우편 번호 및 신용 카드 번호와 같은 숫자 코드를 나타내는 적절한 방법이 없습니다. 가장 좋은 해결책은 type='tel'숫자 키패드를 제공하고 데스크탑에 문자를 추가 할 수있는 기능을 사용 하는 것입니다.

입력 text하고 pattern='/d'당신에게 숫자 키패드 만 iOS에서 제공합니다.

inputmode유형에 관계없이 키패드를 지정할 수 있는 속성에 대한 HTML5.1 제안이 있습니다 . 그러나 현재 어떤 브라우저에서도 지원되지 않습니다.

나는 또한 한 번 봐 가지고 추천 할 것입니다 Webshim의 가 polyfill 라이브러리 polyfill 방법 입력 이러한 유형을.

---

빠른 Google 검색 에서이 Stackoverflow 질문을 찾았습니다 .

HTML

<input type="text">

자바 스크립트

$('input[type="text"]').on('touchstart', function() {
   $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
   $(this).attr('type', 'text');
});

입력 유형은 양식의 유효성을 검사하기 전에 전환되어 값을 엉망으로 만들지 않고 올바른 키보드를 표시합니다. iOS에서만 실행하려면 사용자 에이전트를 사용해야 할 것입니다.

iOS 감지시 Stackoverflow

---

이렇게하면 기본적으로 ios 키보드의 숫자 쪽이 표시되고 알파벳쪽으로 전환하는 기능이 유지됩니다. html 입력 유형이 변경되면 장치는 적절한 유형에 맞게 키보드를 변경합니다.

(function ($) {
    var control = $('#test2');
    var field = $('#test1');

    control.bind('click', function () {
        if (control.is(':checked')) {
            field.attr('type', 'text');
        } else {
            field.attr('type', 'number');
        }
    })
}(jQuery));

<input type="number" id="test1" value="123" />
<input id="test2" type="checkbox" />Change

---

대체 데모 : http://jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result/

If you want the large numerical format keyboard (the telephone style) you can adjust the code accordingly and it still works:

(function ($) {
    var control = $('#test2');
    var field = $('#test1');

    control.bind('click', function () {
        if (control.is(':checked')) {
            field.attr('type', 'text');
        } else {
            field.attr('type', 'tel');
        }
    })
}(jQuery));

<input type="tel" id="test1" value="a" />
<input id="test2" type="checkbox" />Change

---

An update to this question in iOS 11. You can get the number keypad by simply adding the pattern attribute (pattern="[0-9]*") to any input with a number type.

The following works as expected.

<input type="number" pattern="[0-9]*">

This also works.

<input type="number" pattern="\d*">

@davidelrizzo posted part of the answer, but the comments from @Miguel Guardo and @turibe give a fuller picture but are easy to miss.

---

Try this:

<input type="text" name="postalcode" class="js-postal">
<script src="https://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  if('ontouchstart' in window) { // ensure we are in touch device.

    $('input.js-postal').on('focus', function() {
      var $this = $(this);

      // memorize current value because...
      var val = $this.val(); 
      // this may cause reset value.
      $this.attr('type', 'number'); 

      setTimeout(function() {
        // Asynchronously restore 'type' and value
        $this.attr('type', 'text');
        $this.val(val);
      }, 0);
    });
  }
});
</script>

I know this is very hackish way, but this apparently works.
I haven't tested on Android devices though.

Note this may causes a little noticeable glitches when $this.attr('type', 'number') because this reset the value when input has non numerical characters.

Basic ideas are stolen from this answer :)

---

HTTP 요청 (사용자 에이전트)의 헤더를 확인하고 숫자 레이아웃을 iOS 장치에 제공하고 나머지는 영숫자 레이아웃을 제공하지 않는 이유는 무엇입니까?

참고 URL : https://stackoverflow.com/questions/25425181/iphone-ios-presenting-html-5-keyboard-for-postal-codes