를 합니다 합니다 를 에 초점을 맞출 때 모바일 기본 키보드를 방지합니다. 를 합니다 합니다 를 에 초점을 맞출 때 모바일 기본 키보드를 방지합니다. 를 합니다 합니다 를 에 초점을..

를 합니다 합니다 를 에 초점을 맞출 때 모바일 기본 키보드를 방지합니다.보여준 것으로부터

이게 제가 시도하는 방법입니다.

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

하지만 그 입력은 여전히 아이폰의 키보드를 '제거'합니다.

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

을 속성을 readonly(또는readonly="readonly"입력 필드에 입력하는 사람을 방지해야 하지만 클릭 이벤트를 실행할 수 있습니다.

날짜/시간 선택기를 사용할 때 모바일이 아닌 장치에서도 유용합니다.

입력모드 속성

<input inputmode='none'>

inputmode을 편집하는 가 입력할 수 있는 입니다.global attribute는 요소 또는 요소의내용을 편집하는 동안 사용자가 할 수 데이터 을 암시합니다.다음 값을 가질 수 있습니다.

- none 가상 키보드가 없습니다.페이지가 자체 키보드 입력 제어를 구현할 때 사용합니다.

---

성공적으로 사용하고 있습니다(Chrome/Android에서 테스트됨).

CSS-Tricks:입력 모드에 대해 알고 싶었던 모든 것

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

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

참고: 잠시 동안 iOS 키보드가 나타나고 숨습니다.

아래 코드가 저에게 적합합니다.

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


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

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

저는 여기서 비슷한 질문을 했는데 - iPhone native datepicker를 사용하세요 - 아주 좋습니다.

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

시놉시스 / 의사 코드:

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가 자체 네이티브 날짜 선택기를 팝업하기 때문이며, 데스크톱 브라우저에서 날짜 선택기를 일관되게 표시하기를 원하기 때문입니다.

최고 댓글에 댓글을 달 수 없기 때문에 어쩔 수 없이 '답변'을 제출합니다.

선택한 답변의 문제점은 필드를 읽기만 하도록 설정하면 아이폰의 탭 순서에서 필드가 제외된다는 것입니다.따라서 "다음"을 눌러 양식을 입력하는 것을 좋아한다면 필드 바로 건너뛸 수 있습니다.

내 의견대로 이것을 해결하는 가장 좋은 방법은 "읽기 전용 무시"를 사용하는 것입니다.

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

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

자, 이것이 제 해결책입니다. (존 밴스의 대답과 유사합니다.)

먼저 여기에 가서 모바일 브라우저를 감지하는 기능을 구하세요.

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용 크롬과 같은 모바일 브라우저가 "데스크톱 버전을 요청"하는 경우 모바일 체크에서 벗어날 수 있고 키보드가 나타나지 않도록 하려면 읽기만 해야 합니다.

그러나 필드를 읽기만 하면 필드를 변경할 수 없는 것처럼 사용자에게 보일 수 있습니다.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"
    });
});

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

Android와 iPhone에 적합한 간단한 일반적인 "키보드 없음" 스크립트가 있습니다.

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

단순 첨부 클래스readonlyJim입력 태그 및 voila에 연결합니다.

(*죄송합니다. 스타트렉이 너무 많습니다.

언급URL : https://stackoverflow.com/questions/7610758/prevent-mobile-default-keyboard-when-focusing-an-input-from-showing