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

Question 1

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

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

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

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

Question 2

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

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

Question 3

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

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

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

Question 4

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

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

Question 5

여기에서 비슷한 질문을했고 환상적인 답변을 얻었습니다. 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가 고유 한 날짜 선택기를 팝업으로 표시하기 때문입니다. 데스크톱 브라우저에서 날짜 선택기를 일관되게 표시하고 싶다고 가정합니다.

Question 6

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

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


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

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

Question 7

내 의견에 따라이를 해결하는 가장 좋은 방법은 “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
        });
});

Question 8

그래서 여기 내 해결책이 있습니다 (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"
    });
});

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