javascript - restablecer - teclado japones iphone

evitar el teclado predeterminado del iPhone cuando se enfoca un<input>

Question

así es como estoy tratando

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

pero la entrada aún ''lanzando'' teclado del iPhone

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

Answer 1

@ rene-pot es correcto Sin embargo, tendrá un signo no permitido en la versión de escritorio del sitio web. Para evitar 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/

Answer 2

Al establecer el campo de entrada en readonly="true" , debería evitar que cualquiera escriba algo en él, pero aún así pueda iniciar un evento de clic.

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

Answer 3

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

Primero ve aquí y consigue una función para detectar navegadores móviles.

http://detectmobilebrowsers.com/

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

Tu página HTML (pseudo có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 utilizar los selectores de fecha nativos en dispositivos móviles mientras configura las fechas mínimas y máximas de cualquier manera.

El campo para dispositivos no móviles debe leerse solo porque si un navegador móvil como Chrome para iOS "solicita una versión de escritorio", entonces pueden sortear la verificación móvil y usted todavía desea evitar que aparezca el teclado.

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

Para obtener más información, simplemente agrego un botón de imagen de calendario al selector de fecha. Solo cambia un poco tu código 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"
    });
});

Nota: tendrás que encontrar una imagen adecuada.

Answer 4

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

El problema con la respuesta seleccionada es que configurar el campo para leer solo elimina el campo del orden de pestañas en el iPhone. Así que si te gusta ingresar formularios presionando "siguiente", saltarás directamente sobre el campo.

Answer 5

El siguiente código funciona para mí:

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


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

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

Answer 6

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

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

Sinopsis / pseudo-có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 configurar dinámicamente el tipo de campo en "fecha" es que Opera mostrará su propio selector de fecha de lo contrario, y supongo que desea mostrar el selector de fecha de forma consistente en los navegadores de escritorio.

Answer 7

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á la ventana emergente.

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

Answer 8

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

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

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