초점을 맞출 때 아이폰 기본 키보드 방지

초점을 맞출 때 아이폰 기본 키보드 방지

---

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

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

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

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

---

입력 필드를로 설정하면 readonly="true"다른 사람이 입력하는 것을 방지 할 수 있지만 여전히 클릭 이벤트를 시작할 수 있습니다.

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

---

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

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

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

---

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

---

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

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

---

아래 코드는 저에게 효과적입니다.

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


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

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

---

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

---

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

First go here and get a function to detect mobile browsers.

http://detectmobilebrowsers.com/

They have a lot of different ways to detect if you are on mobile, so find one that works with what you are using.

Your HTML page (pseudo code):

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  
    });
});

This way you can still use native date selectors in mobile while still setting the min and max dates either way.

The field for non mobile should be read only because if a mobile browser like chrome for ios "requests desktop version" then they can get around the mobile check and you still want to prevent the keyboard from showing up.

However if the field is read only it could look to a user like they cant change the field. You could fix this by changing the CSS to make it look like it isn't read only (ie change border-color to black) but unless you are changing the CSS for all input tags you will find it hard to keep the look consistent across browsers.

To get arround that I just add a calendar image button to the date picker. Just change your JQuery code a bit:

$( ".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"
    });
});

Note: you will have to find a suitable image.

---

@rene-pot is correct. You will however have a not-allowed sign on the desktop version of the website. Way around this, apply the readonly="true" to a div that will show up on the mobile view only and not on desktop. See what we did here http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/

참고URL : https://stackoverflow.com/questions/7610758/prevent-iphone-default-keyboard-when-focusing-an-input