HTML 모바일 - 숨길 소프트 키보드 사용

Question

쿠폰 회사의 프런트 엔드 사이트를 개발 중이며 사용자가 전화 번호와 $$을 입력하기 만하면되는 페이지가 있습니다. Javascript로 제작 된 재미있는 온 스크린 키보드가 사용하기 쉽고 빠릅니다. 그러나 사용자가 초점을 맞추고 해당 필드에 텍스트/숫자를 입력 할 때 소프트 키보드가 터지는 것을 막을 수있는 솔루션을 찾고 있습니다.

HTML5가 등장한 "전화 번호/전화/이메일"유형 속성에 대해 알고 있습니다. 그러나 미친 소리가 날 위험이 있으므로 실제로 화면상의 키보드를 사용하고 싶습니다.

참고 :이 웹 사이트는 주로 태블릿을 대상으로합니다.

감사합니다.

Answer 1

소프트 키보드는 OS의 일부이기 때문에 더 이상 숨길 수 없으며 iOS에서도 키보드에서 요소가 포커스를 잃어 버리는 것을 숨길 수 있습니다. 당신이 다음 blur()onFocus 입력에 속성 등을 사용하는 경우

그러나, 텍스트 입력 즉시, 키보드 자체 숨길되고 onFocus 이벤트는 지난 초점을 맞추고 된 텍스트 입력을 정의하는 변수를 설정할 수 있습니다.

그런 다음 키 누르기를 시뮬레이션하는 대신 마지막으로 포커스가있는 (변수를 사용하여 확인) 텍스트 입력 만 변경하도록 페이지 키보드를 변경하십시오.

Answer 2

Scott S의 답변이 완벽하게 작동했습니다.

모바일 용 웹 기반 전화 다이얼 패드를 코딩하고 있었고 사용자가 키패드 (테이블의 td 스팬 요소로 구성된 숫자)를 누를 때마다 소프트 키 보드가 나타납니다. 또한 사용자가 전화를 거는 번호의 입력 상자를 사용할 수 없기를 바랍니다. 이것은 실제로 1 발의 두 문제를 모두 해결했습니다. 다음을 사용 하였다 : 더 리더/수색자를 들어

<input type="text" id="phone-number" onfocus="blur();" /> 

Answer 3

: Rene Pot으로

이 this topic에 지적,

을 readonly="true"하기 위해 입력 필드를 설정하면 아무 것도 입력 사람을 방지한다 하지만 여전히 클릭 이벤트를 시작할 수 있습니다.

이 방법을 사용하면 "소프트"키보드가 나타나지 않고 클릭 이벤트를 시작하거나 온 스크린 키보드로 입력 내용을 채울 수 있습니다.

이 솔루션은 일반적으로 이미 컨트롤을 구현하는 날짜 - 시간 선택기와도 잘 작동합니다.

Answer 4

예제 최대 길이를 채우고 난 후 필드가 흐릿 해집니다. 필드가 두 개 이상일 경우 필드를 추가하면됩니다. '//'

var MaxLength = 8; 
    $(document).ready(function() { 
     $('#MyTB').keyup(function() { 
      if ($(this).val().length >= MaxLength) { 
       $('#MyTB').blur(); 
      // $('#MyTB2').focus(); 
     } 
      }); });