2009-02-12 4 views

Répondre

58

Avec jQuery 1.4, vous pouvez changer le type d'une entrée pendant qu'elle est détachée.

marker = $('<span />').insertBefore('#myInput'); 
$('#myInput').detach().attr('type', 'text').insertAfter(marker); 
marker.remove(); 
+5

Cela fonctionne un régal. Je ne savais pas à propos de detach(), gentil. – philoye

+1

Je suis d'accord avec @MildFuzz ici - c'est une solution géniale! –

+0

Quelqu'un se soucie de modifier et d'expliquer ce que cela fait réellement? (J'ai commencé ici http://api.jquery.com/detach) – matrixugly

12

Je ne suis pas sûr que ce soit possible, donc je suggère d'utiliser un div caché pour contenir l'élément d'entrée, qui peut être montré comme nécessaire. Le champ de saisie de texte peut toujours contenir des données même s'il est caché.

+1

Ceci est un bon point pour des raisons d'accessibilité. Vous ne devez pas utiliser une entrée masquée, sauf pour les champs auxiliaires qui ne sont pas destinés à la saisie par l'utilisateur. –

+0

Il est logique de transformer une entrée de texte en entrée masquée lorsque la valeur est connue à l'avance. Dans mon cas, il doit s'agir d'un champ de texte lorsque je souhaite que le visiteur saisisse sa propre valeur OpenID, mais je souhaite que le type devienne un champ masqué lorsque le visiteur sélectionne un fournisseur d'authentification Google, Yahoo ou Facebook, car ces URL sont prédéterminés et ne devraient pas vraiment être modifiés par le visiteur. Il y a des moments où vous pouvez vouloir une étiquette cachée ou div pour contenir des données, mais je ne pense pas que ce soit l'un d'entre eux. – TARKUS

8

IE ne vous permettra pas de changer le type d'un élément de formulaire pour des raisons de sécurité, donc j'irais avec la suggestion div cachée d'Aram.

+3

Bien que ce soit surtout vrai, Ian Mackinnon a posté une solution ci-dessous qui a fonctionné pour moi. Depuis jQuery 1.4, vous pouvez changer le type d'entrée _if_ s'il est détaché. – kingjeffrey

8

Voilà comment je ferais ceci:

$("input[type='hidden']").each(function(){ 
    var name = $(this).attr('name'); // grab name of original 
    var value = $(this).attr('value'); // grab value of original 
    /* create new visible input */ 
    var html = '<input type="text" name="'+name+'" value="'+value+'" />'; 
    $(this).after(html).remove(); // add new, then remove original input 
}); 

Si vous souhaitez filtrer certains éléments appellent filtre() avant chaque(), comme ceci:

$("input[type='hidden']").filter("[name='whatever']").each(function... 
2

homme facile .. .

$('input[type="hidden"]').each (function() { this.type = 'text'; });   

Trigger sur un événement

+1

Avez-vous essayé? –

+1

Oui cela fonctionne comme un charme :) – Bunkerbuster

0
Overlay.toAnyType = function (c, type) { 

    var shadow = jQuery(document.createElement(c.context.nodeName)); 

    // Clone attributes to new object. 
    for (var i = 0; i < c[0].attributes.length; i++) { 
     var attr = c[0].attributes[i].name; 
     var val = c[0].attributes[i].value; 

     if (attr == "type") val = type; 
     shadow.attr(attr, val); 
    } 


    shadow.insertAfter(c); 
    c.remove(); 
}; 

Lorsque c est un objet jQuery; la fonction ci-dessus change l'attribut type. Utilisation:

var inputElemt = jQuery("#input"); 
Overlay.toAnyType(inputElemt, "text"); 
0

fil vieux, mais j'ai récemment besoin de faire quelque chose de similaire, mais avec des champs de fichiers et de les effacer ... Je pense que la même solution pourrait appliquer, mais au moins vous pouvez saisir le contenu dans ce cas.

var temp = $('#hidden-field').val(); 
$("#container-for-field").html("<input id='not-hidden' type='text' value='"+temp+"'/>"); 

Cela devrait également résoudre le problème :).

Questions connexes