iPhone / iOS : 우편번호 HTML5 키보드 제시

iPhone / iOS : 우편번호 HTML5 키보드 제시

HTML 5 입력을 위해 모바일 장치에 다양한 키보드를 표시하는 몇 가지 요령이 있습니다.<input>

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

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

그type="number"입력 유형은 일반 키보드를 표시하지만 숫자 레이아웃으로 전환되었습니다.

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

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

저는 인 ios의 동작을 .type="number"하지만 데스크톱 브라우저에서 필드가 일반 텍스트 필드처럼 작동하기를 원합니다.이것이 가능합니까?

업데이트:

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

이것이 효과가 있을까요?

HTML:

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

이렇게 하면 Android/iOS 전화 브라우저에서 숫자 키보드를 사용할 수 있고, 데스크톱 브라우저에서 브라우저 양식 유효성 검사를 사용할 수 없으며, 화살표 스피너가 표시되지 않으며, 선행 0이 허용되며, iPad뿐만 아니라 데스크톱 브라우저에서도 쉼표와 문자가 허용됩니다.

Android / iOS 폰:

바탕 화면:

아이패드:

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

형text그리고.pattern='\d*'에서만 가능합니다.OS에서만 숫자 키패드를 제공합니다.

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

저는 또한 이러한 유형의 입력에 대한 폴리필 방법이 있는 웹심 폴리필 라이브러리를 보는 것을 추천합니다.

빠른 구글 검색에서 스택 오버플로 질문을 찾았습니다.

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 검색 시 스택 오버플로 발생

iOS 11에서 이 질문에 입니다. 속성 Attribute)을 수 .pattern="[0-9]*"를 입력합니다.

다음은 예상대로 작동합니다.

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

이것도 효과가 있습니다.

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

@davidelrizzo는 답변의 일부를 게시했지만, @Miguel Guardo와 @turibe의 댓글은 더 완전한 그림을 제공하지만 놓치기 쉽습니다.

그러면 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/

큰 숫자 형식 키보드(전화 스타일)를 원할 경우 코드를 적절히 조정할 수 있으며 여전히 작동합니다.

(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

inputmode="inputmode", inputmode="inputmode"라는 네이티브 HTML API 속성을 사용할 수 있습니다. (이것이 이를 구현하는 기본 방법입니다.) 여기에서 입력 모드에 대한 자세한 내용을 읽을 수 있습니다.

<input type="number" inputmode="numeric" />

사용해 보십시오.

<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>

이것이 매우 진부한 방법이라는 것을 알지만, 이것은 분명히 효과가 있습니다.
저는 안드로이드 기기에서 테스트를 해본 적이 없습니다.

이 경우 다음과 같은 경우 약간의 눈에 띄는 결함이 발생할 수 있습니다.$this.attr('type', 'number')왜냐하면 이것은 값을 재설정하기 때문입니다.input숫자가 아닌 문자가 있습니다.

이 대답에서 기본적인 아이디어가 도용되었습니다 :)

<input type="tel" inputmode="decimal">

위는 저를 위해 몇 년 동안 일해왔습니다.작동한다는 것은 모바일 장치에서 숫자 가상 키보드가 표시된다는 것을 의미합니다.input포커스를 수신합니다.기기에서 가 숫자,할 수 .OS 기기에서 키보드를 사용하면 숫자, 소수 및 문자를 입력할 수 있습니다.제 키보드 이벤트 핸들러는 수천 개의 구분자를 삽입하고, 검증 통과에 문제가 없기 때문에 사용자도 쉼표를 입력할 수 있을 것으로 생각합니다.음수 값을 입력할 수 있으므로 하이픈은 허용되지만 iOS 키보드에는 하이픈이 표시되지 않습니다.

만약 당신이 이것을 시도하고 싶다면, 당신은 제 사이트에서 아무 계산기나 시도할 수 있습니다.

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

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