marcador de posición "tipo de entrada = fecha" en iOS?

Question

Actualmente estoy desarrollando un sitio web dirigido a iPhones/iPads.

Configurar el tipo de entrada a la fecha cambia el aspecto del campo a un menú desplegable, y el atributo de marcador de posición que trabaja con campos de texto solo se muestra en la versión de escritorio, no en el iphone. ¿Hay alguna forma de evitar esto?

Así es como se ve actualmente; http://i44.tinypic.com/2u91xsz.png

Quiero deshacerme de ese texto de fecha de cierre y tener algo similar al menú desplegable sobre él.

Básicamente solo para que el usuario sepa lo que están ingresando sin la necesidad de utilizar espacio adicional en la pantalla, por lo que no es el problema mayor si no hay solución.

Answer 1

el marcador de posición que funciona con campos de texto solo muestra en la versión de escritorio, no en el iphone. ¿Hay alguna forma de evitar esto?

Pruebe usar javascript y css.

<div id="closing_date"> 
<label for="closing_date_field" class="overlabel">Closing Date</label> 
<input id="closing_date_field" type="date" name="closing_date"> 
</div> 

ver el código here

Answer 2

que he hecho que funcione con algunos ": antes de" pseudo-clase y un pequeño fragmento de JavaScript. Deberá tener una clase o identificación en su entrada. Aquí está una muestra con un ID de "myInput"

#myInput:before{ content:"Date of birth"; width:100%; color:#AAA; } 
#myInput:focus:before, 
#myInput.not_empty:before{ content:none } 

A continuación, en javascript, añadir la clase "not_empty" en función del valor de los eventos onChange y onKeyUp.

Incluso puede agregar todo esto de forma dinámica en cada campo de fecha.

Aquí es un código en bruto para hacer esto:

$('input[type=date]').each(function(){ 
    var input=$(this); 
    var id=input.attr('id'); 
    if (!id){ 
     id='RandomGeneratedId_'+Math.random().toString(36).substring(7); 
     input.attr('id',id); 
    } 
    var placeholder=input.attr('placeholder'); 
    if (placeholder){ 
     $('head').append('<style> #'+id+':before{ content:"'+placeholder+'"; width:100%; color:#AAA; } #'+id+':focus:before,#'+id+'.not_empty:before{ content:none }</style>'); 
    } 
    input.on('change keyup',function(){ 
     if ($(this).val()){ 
      $(this).addClass('not_empty') 
     }else{ 
      $(this).removeClass('not_empty') 
     } 
     return false; 
    }); 
}); 

No es perfecto, pero funciona bien en Chrome y iOS7 webviews

Answer 3

Me tomó un tiempo calcular éste hacia fuera, dejarlo como type = "texto", y añadir onfocus = "('fecha' this.type =)"

incluso me gusta el onBlur que he visto mencionado

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">