Ändern Sie den Typ des Eingabefelds mit jQuery

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

Dies soll das #passwordEingabefeld (mit id="password") ändern , von demtype password eines normalen Textfelds und dann den Text „Passwort“ eingeben.

Es funktioniert jedoch nicht. Warum?

Hier ist das Formular:

<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>

Es ist sehr wahrscheinlich, dass diese Aktion als Teil des Sicherheitsmodells des Browsers verhindert wird.

Bearbeiten: In der Tat, beim Testen in Safari bekomme ich den Fehler type property cannot be changed.

Edit 2: Das scheint ein Fehler zu sein, der direkt aus jQuery stammt. Die Verwendung des folgenden geraden DOM-Codes funktioniert einwandfrei:

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

Bearbeiten 3: Direkt aus der jQuery-Quelle scheint dies mit dem IE in Zusammenhang zu stehen (und könnte entweder ein Fehler oder ein Teil des Sicherheitsmodells sein, aber jQuery ist nicht spezifisch):

// 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";

Noch einfacher ... es ist nicht erforderlich, alle dynamischen Elemente zu erstellen. Erstellen Sie einfach zwei separate Felder, wobei eines zum "echten" Passwortfeld (Typ = "Passwort") und eines zum "falschen" Passwortfeld (Typ = "Text") wird. Setzen Sie den Text im falschen Feld auf eine hellgraue Farbe und Setzen Sie den Anfangswert auf 'Passwort'. Fügen Sie dann mit jQuery einige Zeilen Javascript wie folgt hinzu:

    <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()" />

Wenn der Benutzer das 'falsche' Passwortfeld eingibt, wird es ausgeblendet, das reale Feld wird angezeigt und der Fokus wird auf das reale Feld verschoben. Sie können niemals Text in das gefälschte Feld eingeben.

Wenn der Benutzer das Feld für das echte Kennwort verlässt, sieht das Skript, ob es leer ist, und wenn ja, wird das Feld für das echte Kennwort ausgeblendet und das gefälschte angezeigt.

Achten Sie darauf, kein Leerzeichen zwischen den beiden Eingabeelementen zu lassen, da der IE ein wenig nacheinander positioniert (das Leerzeichen wird gerendert) und sich das Feld zu bewegen scheint, wenn der Benutzer es betritt / verlässt.

Ein-Schritt-Lösung

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

Heutzutage können Sie nur verwenden

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

Aber natürlich sollten Sie das wirklich einfach tun

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

in allen außer IE. Es gibt Platzhalter-Shims, die diese Funktionalität auch im IE nachahmen.

Eine browserübergreifendere Lösung… Ich hoffe, das Wesentliche hilft jemandem da draußen.

Diese Lösung versucht, das typeAttribut <input>festzulegen. Wenn dies fehlschlägt, wird einfach ein neues Element erstellt, wobei Elementattribute und Ereignishandler beibehalten werden.

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

Das funktioniert bei mir.

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

Eine ultimative Möglichkeit, jQuery zu verwenden:

Lassen Sie das ursprüngliche Eingabefeld vom Bildschirm ausgeblendet.

$("#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

Erstellen Sie im Handumdrehen ein neues Eingabefeld mit JavaScript.

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

Migrieren Sie die ID und den Wert vom ausgeblendeten Eingabefeld in das neue Eingabefeld.

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

Um den Fehler im IE wie zu umgehen type property cannot be changed umgehen, können Sie dies wie folgt nützlich finden:

Fügen Sie ein Klick- / Fokus- / Änderungsereignis an ein neues Eingabeelement an, um dasselbe Ereignis bei versteckten Eingaben auszulösen.

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

Das alte versteckte Eingabeelement befindet sich noch im DOM und reagiert daher auf das durch das neue Eingabeelement ausgelöste Ereignis. Wenn die ID ausgetauscht wird, verhält sich das neue Eingabeelement wie das alte und reagiert auf jeden Funktionsaufruf der ID der alten versteckten Eingabe, sieht jedoch anders aus.

Ein bisschen knifflig, aber FUNKTIONIERT !!! ;-);

Haben Sie versucht, .prop () zu verwenden?

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

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

Ich habe nicht im IE getestet (da ich dies für eine iPad-Site benötigte) - ein Formular, in dem ich den HTML-Code nicht ändern konnte, aber JS hinzufügen konnte:

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

(Old School JS ist hässlich neben all der jQuery!)

Aber http://bugs.jquery.com/ticket/1957 Links zu MSDN: „Wie von Microsoft Internet Explorer 5 wird die Art Eigenschaft Lese- / Schreib einmal, aber nur , wenn ein Eingangselement mit der createelement- Methode erstellt und bevor es dem Dokument hinzugefügt wird. " Vielleicht könnten Sie das Element duplizieren, den Typ ändern, zu DOM hinzufügen und das alte entfernen?

Erstellen Sie einfach ein neues Feld, um diese Sicherheitssache zu umgehen:

var $oldPassword = $("#password");
var $newPassword = $("<input type='text' />")
                          .val($oldPassword.val())
                          .appendTo($oldPassword.parent());
$oldPassword.remove();
$newPassword.attr('id','password');

Ich habe die gleiche Fehlermeldung erhalten, als ich versucht habe, dies in Firefox 5 zu tun.

Ich habe es mit dem folgenden Code gelöst:

<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>

Um es zu verwenden, setzen Sie einfach die Attribute onFocus und onBlur Ihrer Felder auf etwa Folgendes:

<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');">

Ich verwende dies auch für ein Benutzernamenfeld, sodass ein Standardwert umgeschaltet wird. Setzen Sie einfach den zweiten Parameter der Funktion auf '', wenn Sie sie aufrufen.

Es kann auch erwähnenswert sein, dass der Standardtyp meines Passwortfelds tatsächlich Passwort ist, nur für den Fall, dass ein Benutzer kein Javascript aktiviert hat oder wenn etwas schief geht, ist sein Passwort auf diese Weise weiterhin geschützt.

Die Funktion $ (document) .ready ist jQuery und wird geladen, wenn das Laden des Dokuments abgeschlossen ist. Dadurch wird das Kennwortfeld in ein Textfeld geändert. Natürlich müssen Sie 'password_field_id' in die ID Ihres Passwortfelds ändern.

Fühlen Sie sich frei, den Code zu verwenden und zu ändern!

Hoffe das hilft allen, die das gleiche Problem hatten wie ich :)

- CJ Kent

EDIT: Gute Lösung, aber nicht absolut. Funktioniert unter FF8 und IE8, jedoch nicht vollständig unter Chrome (16.0.912.75 ver). Chrome zeigt das Passwort nicht an beim der Seite nicht an. Außerdem - FF zeigt Ihr Passwort an, wenn das automatische Ausfüllen aktiviert ist.

Einfache Lösung für alle, die die Funktionalität in allen Browsern nutzen möchten:

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

Typeneigenschaften können nicht geändert werden. Sie müssen die Eingabe durch eine Texteingabe ersetzen oder überlagern und den Wert beim Senden an die Kennworteingabe senden.

Ich denke, Sie könnten ein Hintergrundbild verwenden, das das Wort "Passwort" enthält, und es wieder in ein leeres Hintergrundbild ändern .focus().

.blur() ----> Bild mit "Passwort"

.focus() -----> Bild ohne "Passwort"

Sie können dies auch mit CSS und jQuery tun. Lassen Sie ein Textfeld genau über dem Passwortfeld anzeigen, hide () ist auf focus () und fokussiert auf das Passwortfeld ...

Versuchen Sie diese
Demo ist hier

$(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+'">');
}); 

Damit funktioniert es viel einfacher:

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

und um es wieder in das Passwortfeld zurückzusetzen ( vorausgesetzt, das Passwortfeld ist das 2. Eingabe-Tag mit Texttyp ):

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

Das hat bei mir funktioniert.

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

Verwenden Sie dieses, es ist sehr einfach

<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'));

Dies wird den Trick machen. Es könnte zwar verbessert werden, Attribute zu ignorieren, die jetzt irrelevant sind.

Plugin:

(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);

Verwendung:

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

Geige:

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

Einfach das:

this.type = 'password';

sowie

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

Dies setzt voraus, dass Ihr Eingabefeld zuvor auf "Text" gesetzt wurde.

Hier ist ein kleiner Ausschnitt, mit dem Sie die typeElemente in Dokumenten ändern können .

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

Das Problem wird umgangen, indem das inputDokument aus dem Dokument entfernt, geändert typeund dann wieder an den ursprünglichen Ort zurückgesetzt wird.

Beachten Sie, dass dieses Snippet nur für WebKit-Browser getestet wurde - keine Garantie für irgendetwas anderes!

Hier ist eine Methode, die ein Bild neben dem Kennwortfeld verwendet, um zwischen dem Anzeigen des Kennworts (Texteingabe) und dem Nichtanzeigen (Kennworteingabe) umzuschalten. Ich verwende ein Bild mit "offenem Auge" und "geschlossenem Auge", aber Sie können alles verwenden, was zu Ihnen passt. Die Funktionsweise besteht aus zwei Eingaben / Bildern. Beim Klicken auf das Bild wird der Wert von der sichtbaren Eingabe in die ausgeblendete kopiert und anschließend die Sichtbarkeit vertauscht. Im Gegensatz zu vielen anderen Antworten, bei denen fest codierte Namen verwendet werden, ist diese allgemein genug, um sie auf einer Seite mehrmals zu verwenden. Es wird auch ordnungsgemäß verschlechtert, wenn JavaScript nicht verfügbar ist.

So sehen zwei davon auf einer Seite aus. In diesem Beispiel wurde das Passwort-A durch Klicken auf das Auge angezeigt.

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

Auf diese Weise kann ich den Typ eines Eingabeelements ändern: old_input.clone () .... Hier ist ein Beispiel. Es gibt ein Kontrollkästchen "id_select_multiple". Wenn dies auf "ausgewählt" geändert wird, sollten Eingabeelemente mit dem Namen "foo" in Kontrollkästchen geändert werden. Wenn das Kontrollkästchen deaktiviert ist, sollten sie wieder zu Optionsfeldern werden.

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

Hier ist eine DOM-Lösung

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;

Ich habe eine jQuery-Erweiterung erstellt, um zwischen Text und Kennwort umzuschalten. Funktioniert in IE8 (wahrscheinlich auch 6 & 7, aber nicht getestet) und verliert Ihren Wert oder Ihre Attribute nicht:

$.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);
        }
    });
};

Klappt wunderbar. Sie können einfach anrufen $('#element').togglePassword();, um zwischen den beiden zu wechseln, oder eine Option angeben, um die Aktion basierend auf etwas anderem (wie einem Kontrollkästchen) zu erzwingen:$('#element').togglePassword($checkbox.prop('checked'));

Nur eine weitere Option für alle IE8-Liebhaber, und sie funktioniert perfekt in neueren Browsern. Sie können den Text einfach so einfärben, dass er dem Hintergrund der Eingabe entspricht. Wenn Sie ein einzelnes Feld haben, ändert sich die Farbe in Schwarz, wenn Sie auf das Feld klicken / fokussieren. Ich würde dies nicht auf einer öffentlichen Website verwenden, da es die meisten Leute "verwirren" würde, aber ich verwende es in einem ADMIN-Bereich, in dem nur eine Person Zugriff auf die Benutzerkennwörter hat.

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

-ODER-

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

Dadurch wird der Text beim Verlassen des Feldes wieder weiß. Einfach, einfach, einfach.

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

[Eine weitere Option] Wenn Sie nun mehrere Felder haben, nach denen Sie suchen, alle mit derselben ID, für die ich sie verwende, fügen Sie den Feldern, in denen Sie den Text ausblenden möchten, eine Klasse von 'Pass' hinzu Passwortfelder geben 'Text' ein. Auf diese Weise werden nur die Felder mit der Klasse "Bestanden" geändert.

<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
});

Hier ist der zweite Teil davon. Dadurch wird der Text nach dem Verlassen des Feldes wieder weiß.

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

Ich habe nur Folgendes getan, um den Typ einer Eingabe zu ändern:

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

und es funktioniert.

Ich musste dies tun, weil ich jQuery UI-Datepicker in einem ASP NET Core 3.1-Projekt verwendete und sie in Chromium-basierten Browsern nicht richtig funktionierten (siehe: https://stackoverflow.com/a/61296225/7420301 ).