evitar el teclado predeterminado del iphone al enfocar una <input>

así es como lo estoy intentando

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

pero la entrada sigue 'iniciando' el teclado del iphone

ps: quiero hacer esto porque estoy usando el complemento datepicker para la fecha

Al agregar el atributo readonly(o readonly="readonly") al campo de entrada, debe evitar que alguien escriba algo en él, pero aún así podrá iniciar un evento de clic en él.

Esto también es útil en dispositivos no móviles, ya que usa un selector de fecha / hora

Puede agregar una función de devolución de llamada a su DatePicker para decirle que difumine el campo de entrada antes de mostrar el DatePicker.

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

Nota: El teclado de iOS aparecerá durante una fracción de segundo y luego se ocultará.

Como no puedo comentar el comentario principal, me veo obligado a enviar una "respuesta".

El problema con la respuesta seleccionada es que configurar el campo en solo lectura elimina el campo del orden de tabulación en el iPhone. Entonces, si le gusta ingresar formularios presionando "siguiente", saltará directamente sobre el campo.

Hice una pregunta similar aquí y obtuve una respuesta fantástica: use el selector de fechas nativo de iPhone, es genial.

Cómo apagar el teclado del iPhone para un campo de entrada específico en la página web

Sinopsis / pseudocódigo:

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

La razón para establecer dinámicamente el tipo de campo en "fecha" es que Opera mostrará su propio selector de fecha nativo de lo contrario, y supongo que desea mostrar el selector de fecha de manera consistente en los navegadores de escritorio.

El siguiente código funciona para mí:

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


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

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

La mejor manera de resolver esto según mi opinión es usar "ignoreReadonly".

Primero haga que el campo de entrada sea de solo lectura y luego agregue ignoreReadonly: true. Esto asegurará que incluso si el campo de texto es de solo lectura, se mostrará una ventana emergente.

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

Así que aquí está mi solución (similar a la respuesta de John Vance):

Primero vaya aquí y obtenga una función para detectar navegadores móviles.

http://detectmobilebrowsers.com/

Tienen muchas formas diferentes de detectar si estás en un dispositivo móvil, así que encuentra una que funcione con lo que estás usando.

Su página HTML (pseudocódigo):

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

De esta manera, aún puede usar selectores de fecha nativos en dispositivos móviles y al mismo tiempo configurar las fechas mínimas y máximas de cualquier manera.

El campo para dispositivos no móviles debe ser de solo lectura porque si un navegador móvil como Chrome para ios "solicita una versión de escritorio", entonces pueden sortear la verificación del dispositivo móvil y aún desea evitar que aparezca el teclado.

Sin embargo, si el campo es de solo lectura, al usuario le podría parecer que no puede cambiar el campo. Puede solucionar esto cambiando el CSS para que parezca que no es de solo lectura (es decir, cambie el color del borde a negro) pero a menos que esté cambiando el CSS para todas las etiquetas de entrada, le resultará difícil mantener la apariencia coherente en navegadores.

Para solucionarlo, simplemente agrego un botón de imagen de calendario al selector de fecha. Simplemente cambie su código JQuery un poco:

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

Nota: deberá encontrar una imagen adecuada.

@ rene-pot es correcto. Sin embargo, tendrá un signo de no permitido en la versión de escritorio del sitio web. Para solucionar esto, aplique readonly = "true" a un div que se mostrará solo en la vista móvil y no en el escritorio. Vea lo que hicimos aquí http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/

Tengo un pequeño script genérico "sin teclado", que funciona para mí con Android y iPhone:

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

Simplemente adjunte agregar clase readonlyJima la etiqueta de entrada y listo.

(* Lo siento mucho StarTrek aquí)