Cambiar el tipo de un elemento de entrada usando jquery

Question

Estoy tratando de cambiar el tipo de entrada, específicamente después de hacer clic en la entrada Necesito cambiar type="text" a type="date".

<input type="text" placeholder="DOB" id="dob" name="dob" /> 
<script> 
    $("#dob").click(function() { 
     $(this).attr('type', 'date'); 

    }); 
</script> 

Quiero lograr esto para una aplicación de iphone. Esto no funciona en el iphone 4. ¿Cómo se puede hacer esto?

Answer 1

Usar este código:

<input type="text" placeholder="DOB" id="dob" name="dob" /> 
<script> 
    $("#dob").click(function(){ 
     $(this).prop('type', 'date'); 

    }); 
</script> 

Aquí está el violín: http://jsfiddle.net/HNKkW/

Answer 2

Es una propiedad, por lo prop() lo hará:

$("#dob").on('click', function(){ 
    $(this).prop('type', 'date'); 
});​ 

Y recuerda que para envolver en una función document.ready!

FIDDLE

Answer 3

Si utiliza la versión anterior de Jquery

$('body').delegate('#dob','click',function(){ 
      $(this).attr('type', 'date'); 

     }); 

O si utiliza la última ves @adeno 's respuesta

Answer 4

Ver este jsfiddle de trabajo.

No se puede cambiar el tipo de una entrada debido a restricciones en el navegador usando .attr. Tenga en cuenta esta advertencia que recibe de la consola:

Uncaught Error: type property can't be changed 

Usted puede cambiar el tipo mediante el uso de .prop()

$("#dob").on('click', function(){ 
    $(this).prop('type', 'date'); 
});​ 

Creo que puede ser un poco de un problema subyacente aquí. ¿No se confundiría al usuario por el tipo de cambio de cuadro de texto?

Si es posible, intente cambiar el tipo de cuadro de texto antes de mostrarlo al usuario.

Answer 5

Creo que la solución correcta para su problema está utilizando el .focus y los .prop propiedades.

<script> 
    $("#dob").focus(function() { 
     $(this).prop('type', 'date'); 

    }); 
</script> 

Answer 6

para mí usando prop directamente sobre el elemento no estaba funcionando, esto sin embargo trabajó para mí después de un montón de tocar el violín, así que quería compartir y tal vez salvar a alguien el dolor de cabeza.

$(document).on('change', '#showPass', function() { 
    if ($(this).is(':checked')) { 
     $(this).parents('form').find('#passField').prop("type", "text"); 
    } else { 
     $(this).parents('form').find('#passField').prop("type", "password"); 
    } 
});