evitar el teclado predeterminado móvil al enfocar un de mostrar

5 minutos de lectura

Avatar de usuario de Toni Michel Caubet
Toni Michel Caubet

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

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

Avatar de usuario de René Pot
René Olla

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

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

  • ¡Mmm! ¡Gracias! pero, ¿podrá el selector de fecha establecer el valor elegido?

    – Toni Michel Caubet

    30 de septiembre de 2011 a las 13:23


  • Sí lo hará. Readonly es solo para el usuario, no para JavaScript.

    – René Pot

    30 de septiembre de 2011 a las 13:28

  • -1 ya que este no es un método muy robusto. La entrada no es técnicamente de “solo lectura”, y como cosas como el tabulado automático (usando tabindex=”x”) no funciona con esto

    – Patricio

    28 de septiembre de 2013 a las 8:41


  • Tabindex parece funcionar todavía para mí. Sin embargo, no puedo usar readonly porque ciertos widgets no vinculan el evento en readonly entradas.

    – Pierre de LESPINAY

    17 de enero de 2014 a las 10:11


  • Solo una nota: readonly es un atributo HTML booleano, lo que significa que su presencia es indicativa del valor. Solo necesita “solo lectura”, no “solo lectura = {verdadero | solo lectura | etc}”

    – contacto mate

    28 de febrero de 2017 a las 5:32

modo de entrada atributo

<input inputmode="none">

los inputmode El atributo global es un atributo enumerado que sugiere el tipo de datos que el usuario puede ingresar al editar el elemento o su contenido. Puede tener los siguientes valores:

none – Sin teclado virtual. Para cuando la página implementa su propio control de entrada de teclado.


Estoy usando esto con éxito (Probado en Chrome/Android)

Trucos CSS: todo lo que siempre quiso saber sobre el modo de entrada

  • Esta es la solución correcta a la pregunta, no la opción de solo lectura

    – Benjamín

    7 de marzo de 2021 a las 17:52

  • +1 Esta es una solución mucho mejor, particularmente en una aplicación web ASP.Net. Readonly resulta ser una propiedad de control, por lo que ingresar readonly=’readonly’ provoca errores de validación.

    – Probablemente

    20 abr 2021 a las 20:04

  • Tan gracioso cómo en la otra pregunta con el mismo significado semántico, sucedió lo mismo. La respuesta correcta solo se agregó mucho después de la pregunta, y tiene muchos menos votos a favor.

    – Zaquías

    24 de septiembre a las 17:40


  • No entiendo por qué la gente dice que esta es una mejor solución que la de solo lectura si Safari sigue mostrando un teclado numérico. No me parece una solución.

    – Tom Davenport

    7 oct a las 15:17

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

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

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

  • Gracias, esto también funciona para Android. Para android ni siquiera aparece

    – timaschew

    02/01/2015 a las 20:44

  • No funciona para mí en Android… El teclado sigue apareciendo

    – mjs

    26 de diciembre de 2015 a las 6:25

Avatar de usuario de Juan Manuel De Castro
juan manuel de castro

El siguiente código funciona para mí:

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


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

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

Avatar de usuario de John Vance
juan vance

Hice una pregunta similar aquí y obtuve una respuesta fantástica: use el selector de fechas nativo de 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 establecer dinámicamente el tipo de campo en “fecha” es que, de lo contrario, Opera mostrará su propio selector de fechas nativo, y asumo que desea mostrar el selector de fechas de manera consistente en los navegadores de escritorio.

  • El problema es que las fechas disponibles o no disponibles ya están configuradas con el selector de fecha… ¡gracias tarde!

    – Toni Michel Caubet

    12 de abril de 2013 a las 18:58

Avatar de usuario de John Vance
juan vance

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

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

  • El problema es que las fechas disponibles o no disponibles ya están configuradas con el selector de fecha… ¡gracias tarde!

    – Toni Michel Caubet

    12 de abril de 2013 a las 18:58

Avatar de usuario de Akbar Badhusha
Akbar Badhusha

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, aparecerá 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
        });
});

¿Ha sido útil esta solución?