iOS에서 숫자 키패드가 표시되지 않음

iOS에서 숫자 키패드가 표시되지 않음

---

Apple의 문서 에 따르면 입력 요소를 설정할 때 number숫자 키패드가 있어야합니다.

<input type="number"/>

number: 숫자를 지정하기위한 텍스트 필드입니다. iOS 3.1 이상에서 숫자 패드 키보드를 불러옵니다.

엉망으로 만드는 것이 거의 불가능 해 보입니다. 그러나 iPhone 또는 시뮬레이터 (iOS6 모두)에서이 간단한 바이올린을 보면 숫자 키패드가 나타나지 않고 대신 표준 알파벳 키보드가 표시됩니다.

http://jsfiddle.net/Cy4aC/3/

도대체 내가 여기서 뭘 엉망으로 만들었 을까요?

---

패턴을 지정해야합니다.

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

a number는 음수 또는 부동 소수점 일 수 있으므로 숫자 전용 패턴을 지정하지 않는 한 키보드에서 -및 .및 ,을 사용할 수 있어야합니다.

---

이것이 원하는 것인지 확실하지 않지만 입력 유형 = "tel"은 "전화 번호 패드"를 제공합니다.

---

내 경험상 이것은 브라우저에서 매우 일관되지 않습니다. iOS는 내 사용 사례에 대해 이것을 올바르게 지원하기 위해왔다 갔다했습니다. 일반적으로 기본 표시 키보드가 숫자로 표시되기를 원합니다. 마지막으로 확인했을 때 input type = "number"를 사용하면 숫자 키보드가 올바르게 표시되지만 "size"속성이 무시되어 모바일 형식이 잘못되었습니다. 기본적으로 숫자 키보드를 선호하는 모든 입력에 속성을 추가했으며 브라우저가 올바르게 작동하는 것으로 감지하면 jQuery를 사용하여 속성 (예 : type = "number")을 변경했습니다. 이렇게하면 개별 입력으로 돌아가서 업데이트 할 필요가 없으며 지원되는 브라우저에만 적용 할 수 있습니다.

주요 모바일 O / S에 입력 유형 외에 "기본 키보드"에 대한 속성이 있으면 좋을 것입니다. 사용자가 주소 나 우편 번호를 입력하면 어떻게 되나요? 일반적으로 숫자로 시작하므로 기본적으로 숫자 키보드를 표시하지만 모든 텍스트를 허용하면 도움이됩니다.

유효성 검사에 관해서는 특정 입력 유형에 대한 유효성 검사를 지원하기 위해 브라우저에 의존 할 수 없으므로 자바 스크립트 및 서버 측 유효성 검사를 사용합니다.

---

많은 아이디어를 읽고 시도한 후, 내가 찾은 것 중 어느 것도 숫자와 코마 또는 점으로 만 키보드를 정확하게 표시하지 못했습니다.

이 입력에 대해 다음과 같은 작업을 수행 <input type="number">하는 onkeyup처리기를 사용하여 완료 했습니다.

var previousValue = localStorage.getItem('myInputId');
if (input.getAttribute('type') === "number" && input.validity && input.validity.badInput) {
    input.value = previousValue || "";
}
localStorage.setItem('myInputId', input.value);

이것은 사용자가 유효성 오류가있는 경우 값을 이전 값으로 대체하여 잘못된 문자를 쓰는 것을 방지합니다 (iOS 객체인지 표준인지 모르겠습니다).

내 편에 더 복잡한 내용이 있기 때문에이 코드 스 니펫을 테스트하지 않았 음을주의하세요.하지만 여러분이 아이디어를 얻길 바랍니다.

이 솔루션으로 :

• iOS : 사용자는 전체 클래식 키보드를 가지고 있지만 기본적으로 숫자로 열리 며 잘못된 문자를 쓸 수 없습니다.
• Android에서는 숫자 키보드가 완벽합니다.
• 앞으로 우리는 iOS가 숫자에 대한 좋은 키보드를 트리거하고 자바 스크립트 부분은 절대로 호출되지 않기를 바랄 수 있습니다.

---

인사말. 나는이 질문이 오래되었다는 것을 알고 있지만 그것이 매우 요구되는 해결책이라고 느꼈고 답변을 게시하기로 결정했습니다.

다음 은 iPad 키보드 와 거의 모든 것을 해결 하기 위해 만든 솔루션 입니다.

또한이 접근 방식 은 내 겸손한 의견으로는 매우 추악한 유형 번호 입력을 사용할 필요가 없습니다 .

아래에서 작동하는 버전을 찾을 수 있습니다.

Apple iPad 키보드 키에 대한 생각 ...

keyDown 이벤트에 의해 처리되지 않는 것처럼 보이거나 모호한 키를 iPad에서 캡처하고 억제하기 위해 keyPress 이벤트 핸들러를 만들어야했습니다. ???!

// Bind keydown event to all input type=text in form.
$("form input[type=text]").keydown(function (e) {

// Reference to keyCodes...
var key = e.which || e.keyCode;
// Reference to shiftKey...
var shift_key = e.shiftKey;
// Reference to ctrlKey...
var ctrl_key = e.ctrlKey;
// Reference to altKey...
var alt_key = e.altKey;


// When user presses the shiftKey...
if(e.shiftKey) {

//...supress its click and whatever key follows after it.
console.log(e.shiftKey + ' and ' + key + ' supressed.');

// Deny
return false;

// ONLY Allow Numbers, Numberpad, Backspace & Tab
} else if ( (key >= 48 && key <=57) || (key >= 96 && key <=105) || (key >= 8 && key <=9) ) {

// Allow
return true;

} else {

// Deny every other key and/or shift + key combination NOT explicitly declared.
return false;
}

});


// KeyPresss to handle remaining iPAD keyboard keys!
// These keys don't seem to be handled by the keyDown event or are ambiguous???!
// Bind keypress event to all input type=text in form.
$("form input[type=text]").keypress(function (e) {

// Reference to keyCodes...
var key = e.which || e.keyCode;
// Reference to shiftKey...
var shift_key = e.shiftKey;
// Reference to ctrlKey...
var ctrl_key = e.ctrlKey;
// Reference to altKey...
var alt_key = e.altKey;

switch (key) {

// Character -> ^
case 94:
return false;

// Character -> #
case 35:
return false;

// Character -> $
case 36:
return false;

// Character -> @
case 64:
return false;

// Character -> &
case 38:
return false;

// Character -> *
case 42:
return false;

// Character -> (
case 40:
return false;

// Character -> )
case 41:
return false;

// Character -> %
case 37:
return false;

// Character -> !
case 33:
return false;

}


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="">

<label for="text1">Numbers, Numberpad, Backspace & Tab ONLY:</label>
<input id="text1" type="text" placeholder="0" min="0" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4">

</form>

참고 URL : https://stackoverflow.com/questions/14447668/input-type-number-is-not-showing-a-number-keypad-on-ios