cambia il tipo di campo di input con jQuery

$(document).ready(function() { // #login-box password field $('#password').attr('type', 'text'); $('#password').val('Password'); }); 

Questo dovrebbe cambiare il campo di inserimento #password (con id="password" ) che è di type password in un normale campo di testo, e quindi inserire il testo “Password”.

Tuttavia, non funziona. Perché?

Ecco la forma:

 

È molto probabile che questa azione sia impedita come parte del modello di sicurezza del browser.

Modifica: in effetti, testando ora in Safari, ottengo la type property cannot be changed errore type property cannot be changed .

Modifica 2: sembra essere un errore uscito da jQuery. Usare il seguente codice DOM diritto funziona bene:

 var pass = document.createElement('input'); pass.type = 'password'; document.body.appendChild(pass); pass.type = 'text'; pass.value = 'Password'; 

Modifica 3: direttamente dal sorgente jQuery, questo sembra essere correlato a IE (e potrebbe essere un bug o parte del loro modello di sicurezza, ma jQuery non è specifico):

 // We can't allow the type property to be changed (since it causes problems in IE) if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode ) throw "type property can't be changed"; 

Ancora più semplice … non è necessario creare tutti gli elementi dinamici. Basta creare due campi separati, creando uno campo “reale” per la password (type = “password”) e uno un campo “falso” per la password (type = “text”), impostando il testo nel campo falso su un colore grigio chiaro e impostazione del valore iniziale su “Password”. Quindi aggiungi alcune righe di Javascript con jQuery come di seguito:

     

Quindi, quando l’utente inserisce il campo della password “falso”, verrà nascosto, verrà mostrato il campo reale e il focus si sposterà sul campo reale. Non potranno mai inserire testo nel campo falso.

Quando l’utente lascia il campo della password reale, lo script vedrà se è vuoto e, in tal caso, nasconderà il campo reale e mostrerà quello falso.

Fai attenzione a non lasciare uno spazio tra i due elementi di input perché IE posizionerà l’uno dopo l’altro (rendering dello spazio) e il campo sembrerà spostarsi quando l’utente entra / esce.

Soluzione ad un passo

 $('#password').get(0).type = 'text'; 

Al giorno d’oggi, puoi semplicemente usarlo

 $("#password").prop("type", "text"); 

Ma ovviamente, dovresti proprio farlo

  

in tutto tranne IE. Esistono shim segnaposto là fuori per imitare quella funzionalità in IE pure.

Una soluzione più cross-browser … Spero che l’essenza di questo aiuti qualcuno là fuori.

Questa soluzione tenta di impostare l’attributo type e, se fallisce, crea semplicemente un nuovo elemento , preservando gli attributi dell’elemento e i gestori di eventi.

changeTypeAttr.js ( GitHub Gist ):

 /* x is the  element type is the type you want to change it to. jQuery is required and assumed to be the "$" variable */ function changeType(x, type) { x = $(x); if(x.prop('type') == type) return x; //That was easy. try { return x.prop('type', type); //Stupid IE security will not allow this } catch(e) { //Try re-creating the element (yep... this sucks) //jQuery has no html() method for the element, so we have to put into a div first var html = $("
").append(x.clone()).html(); var regex = /type=(\")?([^\"\s]+)(\")?/; //matches type=text or type="text" //If no match, we add the type attribute to the end; otherwise, we replace var tmp = $(html.match(regex) == null ? html.replace(">", ' type="' + type + '">') : html.replace(regex, 'type="' + type + '"') ); //Copy data from old element tmp.data('type', x.data('type') ); var events = x.data('events'); var cb = function(events) { return function() { //Bind all prior events for(i in events) { var y = events[i]; for(j in y) tmp.bind(i, y[j].handler); } } }(events); x.replaceWith(tmp); setTimeout(cb, 10); //Wait a bit to call function return tmp; } }

Questo funziona per me.

 $('#password').replaceWith($('#password').clone().attr('type', 'text')); 

Un ottimo modo per usare jQuery:


Lascia il campo di input originale nascosto dallo schermo.

 $("#Password").hide(); //Hide it first var old_id = $("#Password").attr("id"); //Store ID of hidden input for later use $("#Password").attr("id","Password_hidden"); //Change ID for hidden input 

Crea subito un nuovo campo di input da JavaScript.

 var new_input = document.createElement("input"); 

Migrare l’ID e il valore dal campo di input nascosto al nuovo campo di input.

 new_input.setAttribute("id", old_id); //Assign old hidden input ID to new input new_input.setAttribute("type","text"); //Set proper type new_input.value = $("#Password_hidden").val(); //Transfer the value to new input $("#Password_hidden").after(new_input); //Add new input right behind the hidden input 

Per aggirare l’errore su IE come la type property cannot be changed , potresti trovarlo utile come segue:

Allega click / focus / cambia evento al nuovo elemento di input, in modo da triggersre lo stesso evento sull’input nascosto.

 $(new_input).click(function(){$("#Password_hidden").click();}); //Replicate above line for all other events like focus, change and so on... 

Il vecchio elemento di input nascosto è ancora all’interno del DOM, quindi reagirà con l’evento innescato dal nuovo elemento di input. Quando l’ID viene scambiato, il nuovo elemento di input si comporterà come il vecchio e risponderà a qualsiasi chiamata di funzione al vecchio ID di input nascosto, ma sembra diverso.

Un po ‘complicato ma FUNZIONA !!! 😉

Non ho testato in IE (poiché avevo bisogno di questo per un sito iPad) – un modulo che non potevo modificare l’HTML ma potrei aggiungere JS:

 document.getElementById('phonenumber').type = 'tel'; 

(La vecchia scuola JS è brutta accanto a tutti i jQuery!)

Ma, http://bugs.jquery.com/ticket/1957 link a MSDN: “A partire da Microsoft Internet Explorer 5, la proprietà type è read / write-once, ma solo quando viene creato un elemento input con il metodo createElement e prima che venga aggiunto al documento. ” quindi forse potresti duplicare l’elemento, cambiare il tipo, aggiungere al DOM e rimuovere quello vecchio?

Hai provato a usare .prop ()?

 $("#password").prop('type','text'); 

http://api.jquery.com/prop/

Basta creare un nuovo campo per bypassare questa cosa di sicurezza:

 var $oldPassword = $("#password"); var $newPassword = $("") .val($oldPassword.val()) .appendTo($oldPassword.parent()); $oldPassword.remove(); $newPassword.attr('id','password'); 

Ho ricevuto lo stesso messaggio di errore durante il tentativo di farlo in Firefox 5.

Ho risolto usando il codice qui sotto:

  

E per usarlo, imposta gli attributi onFocus e onBlur dei tuoi campi su qualcosa di simile al seguente:

   

Lo uso anche per il campo del nome utente, quindi triggers un valore predefinito. Basta impostare il secondo parametro della funzione su “” quando lo si chiama.

Potrebbe anche valere la pena notare che il tipo predefinito del mio campo password è in realtà una password, nel caso in cui un utente non abbia javascript abilitato o se qualcosa va storto, in questo modo la loro password è ancora protetta.

La funzione $ (document) .ready è jQuery e viene caricata al termine del caricamento del documento. Questo quindi cambia il campo della password in un campo di testo. Ovviamente dovrai cambiare “password_field_id” con l’ID del tuo campo password.

Sentiti libero di usare e modificare il codice!

Spero che questo aiuti tutti quelli che hanno avuto lo stesso problema che ho fatto 🙂

– CJ Kent

EDIT: buona soluzione ma non assoluta. Funziona su FF8 e IE8, ma non completamente su Chrome (16.0.912.75 ver). Chrome non visualizza il testo della Password quando viene caricata la pagina. Inoltre, FF mostrerà la tua password quando la funzione di riempimento automatico è triggers.

Soluzione semplice per tutti coloro che desiderano la funzionalità in tutti i browser:

HTML

   Hide password 

jQuery

 $("#passwordSwitch").change(function(){ var p = $('#password'); var h = $('#passwordHide'); h.val(p.val()); if($(this).attr('checked')=='checked'){ h.hide(); p.show(); }else{ p.hide(); h.show(); } }); 

Le proprietà del tipo non possono essere modificate è necessario sostituire o sovrapporre l’input con un input di testo e inviare il valore all’input della password su submit.

Immagino che potresti usare un’immagine di sfondo che contiene la parola “password” e cambiarla in un’immagine di sfondo vuota su .focus() .

.blur() —-> immagine con “password”

.focus() —–> immagine senza “password”

Potresti farlo anche con alcuni CSS e jQuery. Un campo di testo appare esattamente sopra il campo della password, hide () è su focus () e si focalizza sul campo della password …

Prova questo
La demo è qui

 $(document).delegate('input[type="text"]','click', function() { $(this).replaceWith(''); }); $(document).delegate('input[type="password"]','click', function() { $(this).replaceWith(''); }); 

usa questo è molto facile

  
 $('#pass').focus(function() { $('#pass').replaceWith(""); $('#password').focus(); });  
 jQuery.fn.outerHTML = function() { return $(this).clone().wrap('
').parent().html(); }; $('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));

Questo farà il trucco. Anche se potrebbe essere migliorato per ignorare attributi che ora sono irrilevanti.

Colbind:

 (function($){ $.fn.changeType = function(type) { return this.each(function(i, elm) { var newElm = $(""); for(var iAttr = 0; iAttr < elm.attributes.length; iAttr++) { var attribute = elm.attributes[iAttr].name; if(attribute === "type") { continue; } newElm.attr(attribute, elm.attributes[iAttr].value); } $(elm).replaceWith(newElm); }); }; })(jQuery); 

Uso:

 $(":submit").changeType("checkbox"); 

Violino:

http://jsfiddle.net/joshcomley/yX23U/

Semplicemente questo:

 this.type = 'password'; 

ad esempio

 $("#password").click(function(){ this.type = 'password'; }); 

Questo presuppone che il tuo campo di inserimento sia stato impostato su “testo” prima della mano.

Ecco un piccolo frammento che ti permette di cambiare il type di elementi nei documenti.

jquery.type.js ( GitHub Gist ):

 var rtype = /^(?:button|input)$/i; jQuery.attrHooks.type.set = function(elem, value) { // We can't allow the type property to be changed (since it causes problems in IE) if (rtype.test(elem.nodeName) && elem.parentNode) { // jQuery.error( "type property can't be changed" ); // JB: Or ... can it!? var $el = $(elem); var insertionFn = 'after'; var $insertionPoint = $el.prev(); if (!$insertionPoint.length) { insertionFn = 'prepend'; $insertionPoint = $el.parent(); } $el.detach().attr('type', value); $insertionPoint[insertionFn]($el); return value; } else if (!jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input")) { // Setting the type on a radio button after the value resets the value in IE6-9 // Reset value to it's default in case type is set after value // This is for element creation var val = elem.value; elem.setAttribute("type", value); if (val) { elem.value = val; } return value; } } 

Risolve il problema rimuovendo l’ input dal documento, cambiando il type e reinserendolo nel punto in cui era originariamente.

Nota che questo snippet è stato testato solo per i browser WebKit, nessuna garanzia su nient’altro!

Funziona molto più facile con questo:

 document.querySelector('input[type=password]').setAttribute('type', 'text'); 

e per tornare nuovamente al campo della password, ( assumendo che il campo della password sia il 2 ° tag di input con tipo di testo ):

 document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password') 

Ecco un metodo che utilizza un’immagine accanto al campo della password per passare dalla visualizzazione della password (immissione del testo) alla non visione (immissione della password). Uso un’immagine a “occhio aperto” e “occhio chiuso”, ma puoi usare quello che fa per te. Il modo in cui funziona è avere due input / immagini e dopo aver cliccato sull’immagine, il valore viene copiato dall’input visibile a quello nascosto, e quindi la loro visibilità viene scambiata. A differenza di molte altre risposte che usano nomi con hardcoded, questo è abbastanza generale da usarlo più volte su una pagina. Si degrada anche se JavaScript non è disponibile.

Ecco cosa sono due di questi in una pagina. In questo esempio, la Password-A è stata rivelata facendo clic sul suo occhio.

Come appare

 $(document).ready(function() { $('img.eye').show(); $('span.pnt').on('click', 'img', function() { var self = $(this); var myinp = self.prev(); var myspan = self.parent(); var mypnt = myspan.parent(); var otspan = mypnt.children().not(myspan); var otinp = otspan.children().first(); otinp.val(myinp.val()); myspan.hide(); otspan.show(); }); }); 
 img.eye { vertical-align: middle; } 
  
Password-A: *
Password-B: *

Questo ha funzionato per me.

 $('#newpassword_field').attr("type", 'text'); 

Mi piace in questo modo, per modificare il tipo di un elemento di input: old_input.clone () …. Ecco un esempio. C’è una casella di controllo “id_select_multiple”. Se questo è cambiato in “selezionato”, gli elementi di input con il nome “foo” dovrebbero essere cambiati in caselle di controllo. Se viene deselezionato, dovrebbero essere nuovamente visualizzati come pulsanti di opzione.

  $(function() { $("#id_select_multiple").change(function() { var new_type=''; if ($(this).is(":checked")){ // .val() is always "on" new_type='checkbox'; } else { new_type="radio"; } $('input[name="foo"]').each(function(index){ var new_input = $(this).clone(); new_input.attr("type", new_type); new_input.insertBefore($(this)); $(this).remove(); }); } )}); 

ecco una soluzione DOM

 myInput=document.getElementById("myinput"); oldHtml=myInput.outerHTML; text=myInput.value; newHtml=oldHtml.replace("password","text"); myInput.outerHTML=newHtml; myInput=document.getElementById("myinput"); myInput.value=text; 

Ho creato un’estensione jQuery per alternare tra testo e password. Funziona in IE8 (probabilmente anche 6 e 7, ma non testato) e non perderà il valore o gli attributi:

 $.fn.togglePassword = function (showPass) { return this.each(function () { var $this = $(this); if ($this.attr('type') == 'text' || $this.attr('type') == 'password') { var clone = null; if((showPass == null && ($this.attr('type') == 'text')) || (showPass != null && !showPass)) { clone = $(''); }else if((showPass == null && ($this.attr('type') == 'password')) || (showPass != null && showPass)){ clone = $(''); } $.each($this.prop("attributes"), function() { if(this.name != 'type') { clone.attr(this.name, this.value); } }); clone.val($this.val()); $this.replaceWith(clone); } }); }; 

Funziona come un fascino. Puoi semplicemente chiamare $('#element').togglePassword(); per passare tra i due o dare un’opzione per ‘forzare’ l’azione in base a qualcos’altro (come una casella di controllo): $('#element').togglePassword($checkbox.prop('checked'));

Solo un’altra opzione per tutti gli amanti di IE8, e funziona perfettamente nei nuovi browser. Puoi semplicemente colorare il testo in modo che corrisponda allo sfondo dell’input. Se si dispone di un singolo campo, questo cambierà il colore in nero quando si fa clic / si concentra sul campo. Non lo userei su un sito pubblico poiché potrebbe “confondere” la maggior parte delle persone, ma lo sto utilizzando in una sezione ADMIN in cui solo una persona ha accesso alle password degli utenti.

 $('#MyPass').click(function() { $(this).css('color', '#000000'); }); 

-O-

 $('#MyPass').focus(function() { $(this).css('color', '#000000'); }); 

Questo, anche necessario, cambierà il testo in bianco quando lasci il campo. Semplice, semplice, semplice

 $("#MyPass").blur(function() { $(this).css('color', '#ffffff'); }); 

[Un’altra opzione] Ora, se hai diversi campi che stai cercando, tutti con lo stesso ID, come lo sto usando, aggiungi una class di ‘pass’ ai campi in cui vuoi hide il testo. Imposta il i campi della password digitano su “testo”. In questo modo, verranno modificati solo i campi con una class di ‘pass’.

  $('[id^=inp_]').click(function() { if ($(this).hasClass("pass")) { $(this).css('color', '#000000'); } // rest of code }); 

Ecco la seconda parte di questo. In questo modo il testo torna al bianco dopo aver lasciato il campo.

 $("[id^=inp_]").blur(function() { if ($(this).hasClass("pass")) { $(this).css('color', '#ffffff'); } // rest of code });