<입력>에 초점을 맞출 때 아이폰 기본 키보드 방지


82

이것이 내가 노력하는 방법이다

<script type="text/javascript">
     $(document).ready(function(){
        $('#dateIn,#dateOut').click(function(e){
            e.preventDefault();
        }); 
     });
</script>

하지만 입력은 여전히 ​​아이폰의 키보드를 '시작'합니다.

추신 : 날짜에 datepicker 플러그인을 사용하고 있기 때문에 이것을하고 싶습니다.

답변:


228

입력 필드에 속성 readonly(또는 readonly="readonly")을 추가하면 아무도 입력 필드에 아무것도 입력하지 못하도록해야하지만 여전히 여기에서 클릭 이벤트를 시작할 수 있습니다.

날짜 / 시간 선택기를 사용할 때 휴대 기기가 아닌 기기에서도 유용합니다.


2
흠! 감사! 그러나 datepicker가 선택한 값을 설정할 수 있습니까?
Toni Michel Caubet 2011 년

9
네, 그렇습니다. 읽기 전용은 JavaScript가 아닌 사용자 전용입니다.
Rene Pot

4
-1 이것은 매우 강력한 방법이 아니기 때문입니다. 입력은 기술적으로 "읽기 전용"이 아니므로 자동 탭 (tabindex = "x"사용)과 같은 작업은이 작업에서 작동하지 않습니다
Patrick

Tabindex가 여전히 작동하는 것 같습니다. 그러나 readonly특정 위젯이 readonly입력에 대한 이벤트를 바인딩하지 않기 때문에 사용할 수 없습니다 .
Pierre de LESPINAY

1
참고 : readonly는 부울 HTML 속성으로, 존재는 값을 나타냅니다. "readonly = {true | readonly | etc}"가 아닌 "readonly"만 필요합니다.
contactmatt

11

DatePicker에 콜백 함수를 추가하여 DatePicker를 표시하기 전에 입력 필드를 흐리게 할 수 있습니다.

$('.selector').datepicker({
   beforeShow: function(){$('input').blur();}
});

참고 : iOS 키보드가 1 초 동안 표시되었다가 숨겨집니다.


1
감사합니다. 이것은 안드로이드에서도 작동합니다. 안드로이드의 경우에도 나타나지 않습니다
timaschew 2015 년

1
안드로이드에서 나를 위해 작동하지 않습니다 .. 키보드는 여전히 팝업은
MJS

1
지금까지 저에게 가장 적합한 답변입니다. 나는 이것을 거의 포기하고 있었다.
티아고 엘리아스

멋지고 우아한 속임수, 감사합니다. 여기에서 IPhone + Android에서 작동합니다.
Erowlin

4

상위 댓글에 댓글을 달 수 없기 때문에 "답변"을 제출해야합니다.

선택한 답변의 문제는 필드를 읽기 전용으로 설정하면 iPhone의 탭 순서에서 필드가 제거된다는 것입니다. 따라서 "다음"을 눌러 양식을 입력하는 것을 좋아한다면 필드를 바로 건너 뛸 수 있습니다.


1
그것은 읽기 전용 사용자 변경 값 (전용 자바 스크립트) 내가 자연 taht를가 생각 때문에 그것을 건너 뛰고 못하게, 의미가
토니 미셸 Caubet을

1
그러나 내가 테스트 한 데스크톱 브라우저 (Safari / mac 포함)에서 탭을 누르면 읽기 전용 필드로 이동합니다.
John Vance 2012 년

1
@JohnVance tab-index 속성이 설정되어 있어도 이것이 사실입니까? 아니면 효과를 무시할까요? (나는 아이폰이 없기 때문에 부탁 해요,하지만 지식을 부탁드립니다)
페르난도 실바

1
@FernandoSilva iPhone Safari에서 이것을 테스트했으며 탭 인덱스를 사용하면 필드를 건너 뛸 수 있습니다.
Betty

4

여기에서 비슷한 질문을했고 환상적인 답변을 얻었습니다. iPhone 기본 datepicker를 사용하세요. 훌륭합니다.

웹 페이지에서 지정된 입력 필드에 대해 iPhone 키패드를 끄는 방법

시놉시스 / 의사 코드 :

if small screen mobile device 

  set field type to "date" - e.g. document.getElementById('my_field').type = "date";
  // input fields of type "date" invoke the iPhone datepicker.

else

  init datepicker - e.g. $("#my_field").datepicker();

필드 유형을 "날짜"로 동적으로 설정하는 이유는 Opera가 고유 한 날짜 선택기를 팝업으로 표시하기 때문입니다. 데스크톱 브라우저에서 날짜 선택기를 일관되게 표시하고 싶다고 가정합니다.


1
문제는 사용 가능 또는 사용 불가능한 날짜가 이미 datepicer로 설정되어 있다는 것입니다 ... 늦게 감사합니다!
Toni Michel Caubet 2013

4

아래 코드는 나를 위해 작동합니다.

<input id="myDatePicker" class="readonlyjm"/>


$('#myDatePicker').datepicker({
/* options */
});

$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});

3

내 의견에 따라이를 해결하는 가장 좋은 방법은 "ignoreReadonly"를 사용하는 것입니다.

먼저 입력 필드를 읽기 전용으로 만든 다음 ignoreReadonly : true를 추가합니다. 이렇게하면 텍스트 필드가 읽기 전용 인 경우에도 팝업이 표시됩니다.

$('#txtStartDate').datetimepicker({
            locale: "da",
            format: "DD/MM/YYYY",
            ignoreReadonly: true
        });
        $('#txtEndDate').datetimepicker({
            locale: "da",
            useCurrent: false,
            format: "DD/MM/YYYY",
            ignoreReadonly: true
        });
});

0

그래서 여기 내 해결책이 있습니다 (John Vance의 대답과 유사).

먼저 여기로 이동하여 모바일 브라우저를 감지하는 기능을 가져옵니다.

http://detectmobilebrowsers.com/

그들은 당신이 모바일에 있는지 감지하는 많은 다른 방법을 가지고 있으므로 당신이 사용하고있는 것과 작동하는 것을 찾으십시오.

HTML 페이지 (의사 코드) :

If Mobile Then
    <input id="selling-date" type="date" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
else
    <input id="selling-date" type="text" class="date-picker" readonly="readonly" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />

JQuery :

$( ".date-picker" ).each(function() {
    var min = $( this ).attr("min");
    var max = $( this ).attr("max");
    $( this ).datepicker({ 
        dateFormat: "yy-mm-dd",  
        minDate: min,  
        maxDate: max  
    });
});

이렇게하면 최소 및 최대 날짜를 설정하는 동안 모바일에서 기본 날짜 선택기를 계속 사용할 수 있습니다.

ios 용 chrome과 같은 모바일 브라우저가 "데스크톱 버전을 요청"하는 경우 모바일 검사를 우회 할 수 있고 여전히 키보드가 표시되지 않도록하려는 경우 모바일이 아닌 필드는 읽기 전용이어야합니다.

그러나 필드가 읽기 전용이면 필드를 변경할 수없는 것처럼 사용자에게 보일 수 있습니다. CSS를 변경하여 읽기 전용이 아닌 것처럼 보이게 할 수 있지만 (예 : 테두리 색상을 검은 색으로 변경) 모든 입력 태그에 대해 CSS를 변경하지 않는 한 모양을 일관성있게 유지하기가 어렵습니다. 브라우저.

날짜 선택기에 달력 이미지 버튼을 추가하기 만하면됩니다. JQuery 코드를 약간 변경하십시오.

$( ".date-picker" ).each(function() {
    var min = $( this ).attr("min");
    var max = $( this ).attr("max");
    $( this ).datepicker({ 
        dateFormat: "yy-mm-dd",  
        minDate: min,  
        maxDate: max,
        showOn: "both",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date"
    });
});

참고 : 적합한 이미지를 찾아야합니다.



0

일반적인 "키보드 없음"스크립트가 있습니다. Android 및 iPhone에서 작동합니다.

  $('.readonlyJim').on('focus', function () {
      $(this).trigger('blur')
  })

단순히 readonlyJim입력 태그와 짜잔 에 추가 클래스 를 첨부하십시오 .

(* 여기 StarTrek 너무 많이 죄송합니다)

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.