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 #passwordcampo di input (con id="password") che è di type passwordun normale campo di testo, quindi compilare il testo "Password".

Tuttavia non funziona. Perché?

Ecco il modulo:

<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in">
  <ol>
    <li>
      <div class="element">
        <input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" />
      </div>
    </li>
    <li>
      <div class="element">
        <input type="password" name="password" id="password" value="" class="input-text" />
      </div>
    </li>
    <li class="button">
      <div class="button">
        <input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" />
      </div>
    </li>
  </ol>
</form>

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

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

Modifica 2: sembra essere un errore appena uscito da jQuery. L'uso del seguente codice DOM diretto funziona perfettamente:

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

Modifica 3: direttamente dalla fonte 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 è necessaria tutta la creazione di elementi dinamici. Basta creare due campi separati, uno dei quali è il campo password "reale" (tipo = "password") e uno un campo password "falso" (tipo = "testo"), impostando il testo nel campo falso su un colore grigio chiaro e impostando il valore iniziale su "Password". Quindi aggiungi alcune righe di Javascript con jQuery come di seguito:

    <script type="text/javascript">

        function pwdFocus() {
            $('#fakepassword').hide();
            $('#password').show();
            $('#password').focus();
        }

        function pwdBlur() {
            if ($('#password').attr('value') == '') {
                $('#password').hide();
                $('#fakepassword').show();
            }
        }
    </script>

    <input style="color: #ccc" type="text" name="fakepassword" id="fakepassword" value="Password" onfocus="pwdFocus()" />
    <input style="display: none" type="password" name="password" id="password" value="" onblur="pwdBlur()" />

Pertanto, quando l'utente inserisce il campo password "falso", questo verrà nascosto, verrà visualizzato il campo reale e lo stato attivo verrà spostato 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.

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

Soluzione in un solo passaggio

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

Al giorno d'oggi, puoi semplicemente usare

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

Ma ovviamente, dovresti davvero farlo

<input type="password" placeholder="Password" />

in tutti tranne IE. Ci sono spessori segnaposto là fuori per imitare quella funzionalità anche in IE.

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

Questa soluzione tenta di impostare il type attributo e, se fallisce, crea semplicemente un nuovo <input>elemento, preservando gli attributi dell'elemento e i gestori di eventi.

changeTypeAttr.js( GitHub Gist ):

/* x is the <input/> 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 = $("<div>").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 modo eccezionale 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 un nuovo campo di input al volo tramite 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 type property cannot be changed , potresti trovare questo utile come belows:

Collega l'evento click / focus / change al nuovo elemento di input, al fine di attivare lo stesso evento su 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 attivato dal nuovo elemento di input. Quando l'ID viene scambiato, il nuovo elemento di input agirà come quello vecchio e risponderà a qualsiasi chiamata di funzione all'ID dell'ingresso nascosto precedente, ma avrà un aspetto diverso.

Un po 'complicato ma FUNZIONA !!! ;-)

Hai provato a usare .prop ()?

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

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

Non ho testato in IE (poiché ne avevo bisogno per un sito iPad) - un modulo che non potevo modificare l'HTML ma potevo aggiungere JS:

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

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

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

Basta creare un nuovo campo per aggirare questo aspetto della sicurezza:

var $oldPassword = $("#password");
var $newPassword = $("<input type='text' />")
                          .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.

L'ho risolto utilizzando il codice seguente:

<script type="text/javascript" language="JavaScript">

$(document).ready(function()
{
    var passfield = document.getElementById('password_field_id');
    passfield.type = 'text';
});

function focusCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == defaultValue)
    {
        field.value = '';
    }
    if (type == 'pass')
    {
        field.type = 'password';
    }
}
function blurCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == '')
    {
        field.value = defaultValue;
    }
    if (type == 'pass' && field.value == defaultValue)
    {
        field.type = 'text';
    }
    else if (type == 'pass' && field.value != defaultValue)
    {
        field.type = 'password';
    }
}

</script>

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

<input type="text" value="Username" name="username" id="username" 
    onFocus="javascript:focusCheckDefaultValue(this, '', 'Username -OR- Email Address');"
    onBlur="javascript:blurCheckDefaultValue(this, '', 'Username -OR- Email Address');">

<input type="password" value="Password" name="pass" id="pass"
    onFocus="javascript:focusCheckDefaultValue(this, 'pass', 'Password');"
    onBlur="javascript:blurCheckDefaultValue(this, 'pass', 'Password');">

Lo uso anche per un campo nome utente, quindi attiva / disattiva un valore predefinito. Basta impostare il secondo parametro della funzione su "" quando lo si chiama.

Inoltre, vale la pena notare che il tipo predefinito del mio campo password è in realtà password, nel caso in cui un utente non abbia javascript abilitato o se qualcosa va storto, in questo modo la sua password è comunque protetta.

La funzione $ (document) .ready è jQuery e si carica al termine del caricamento del documento. Questo quindi cambia il campo della password in un campo di testo. Ovviamente dovrai cambiare 'password_field_id' nell'ID del 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 la pagina viene caricata. Inoltre - FF visualizzerà la password quando è attivato il riempimento automatico.

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

HTML

<input type="password" id="password">
<input type="text" id="passwordHide" style="display:none;">
<input type="checkbox" id="passwordSwitch" checked="checked">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();
    }
});

Questo ha funzionato per me.

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

Le proprietà del tipo non possono essere modificate, è necessario sostituire o sovrapporre l'input con un input di testo e inviare il valore all'inserimento della password al momento dell'invio.

Immagino che potresti usare un'immagine di sfondo che contenga la parola "password" e cambiarla in un'immagine di sfondo vuota .focus().

.blur() ----> immagine con "password"

.focus() -----> immagine senza "password"

Potresti anche farlo con alcuni CSS e jQuery. Fai apparire un campo di testo esattamente sopra il campo della password, hide () è attivo () e attivo sul campo password ...

Prova questa
demo è qui

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

Funziona molto più facilmente con quello:

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

e per tornare nuovamente al campo password, ( supponendo che il campo password sia il secondo tag di input con tipo di testo ):

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

usa questo è molto semplice

<input id="pw" onclick="document.getElementById('pw').type='password';
  document.getElementById('pw').value='';"
  name="password" type="text" value="Password" />

$('#pass').focus(function() { 
$('#pass').replaceWith("<input id='password' size='70' type='password' value='' name='password'>");
$('#password').focus();
});

<input id='pass' size='70' type='text' value='password' name='password'>

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

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

Collegare:

(function($){
  $.fn.changeType = function(type) {  
    return this.each(function(i, elm) {
        var newElm = $("<input type=\""+type+"\" />");
        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';
});

Ciò presuppone che il campo di input sia stato impostato prima su "testo".

Ecco un piccolo frammento che ti consente di modificare gli typeelementi 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 inputdal documento, modificando iltype e rimettendolo nel punto in cui era originariamente.

Nota che questo frammento è stato testato solo per i browser WebKit - nessuna garanzia su nient'altro!

Ecco un metodo che utilizza un'immagine accanto al campo della password per alternare tra la visualizzazione della password (immissione del testo) e il non vederla (immissione della password). Uso un'immagine ad "occhio aperto" e "occhio chiuso", ma puoi usare quello che ti si addice. Il modo in cui funziona è avere due input / immagini e facendo clic 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 codificati, questa è abbastanza generica da usarla più volte su una pagina. Si degrada anche con grazia se JavaScript non è disponibile.

Ecco come appaiono due di questi su una pagina. In questo esempio, la password-A è stata rivelata facendo clic sul suo occhio.

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
<b>Password-A:</b>
<span class="pnt">
<span>
<input type="password" name="passa">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span>
<span style="display:none">
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span>
</span>
</form>

<form>
<b>Password-B:</b>
<span class="pnt">
<span>             
<input type="password" name="passb">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span> 
<span style="display:none">            
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span> 
</span>
</form>

Mi piace in questo modo, per cambiare il tipo di un elemento di input: old_input.clone () .... Ecco un esempio. C'è una casella di controllo "id_select_multiple". Se questo viene modificato in "selezionato", gli elementi di input con il nome "pippo" devono essere cambiati in caselle di controllo. Se viene deselezionato, dovrebbero diventare nuovamente 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 tuo valore o 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 = $('<input type="password" />');
            }else if((showPass == null && ($this.attr('type') == 'password')) || (showPass != null && showPass)){
                clone = $('<input type="text" />');
            }
            $.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 browser più recenti. 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 focalizza sul campo. Non lo userei su un sito pubblico poiché "confonderebbe" la maggior parte delle persone, ma lo sto usando 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 controllando, tutti con lo stesso ID, per cui lo sto usando, aggiungi una classe di 'passaggio' ai campi in cui vuoi nascondere il testo. Imposta il campi password digitare "testo". In questo modo, verranno modificati solo i campi con una classe di "passaggio".

<input type="text" class="pass" id="inp_2" value="snoogle"/>

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

Ecco la seconda parte di questo. Questo cambia il testo di nuovo in bianco dopo aver lasciato il campo.

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

Ho appena fatto quanto segue per cambiare il tipo di input:

$('#ID_of_element')[0].type = 'text';

e funziona.

Avevo bisogno di farlo perché stavo usando i datepicker dell'interfaccia utente jQuery in un progetto ASP NET Core 3.1 e non funzionavano correttamente sui browser basati su Chromium (vedi: https://stackoverflow.com/a/61296225/7420301 ).