Ändern Sie den Typ des Eingabefelds mit jQuery

205
$(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>
Richard Knop
quelle
Warum willst du es ändern?
ChaosPandion
Ich möchte einen benutzerfreundlichen 'Passwort'-Text in der Eingabe haben, damit die Benutzer wissen, was sie ausfüllen müssen (da es keine Beschriftung gibt).
Richard Knop
1
Überprüfen Sie dieses Video: youtube.com/watch?v=5YeSqtB0kfE
Grijesh Chauhan

Antworten:

258

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";
Augenlidlosigkeit
quelle
12
Ich muss sagen, dies ist die nutzloseste Sicherheitsmessung, die ich je gesehen habe. Es scheint keinen so großen Unterschied zu geben, ob man den Feldtyp schnell ändert oder durch einen völlig neuen ersetzt. Sehr seltsam ... hat sowieso für mich gearbeitet. Vielen Dank!
2
Es ist kein Sicherheitsmodell, ich kann bestätigen, dass es in IE7, IE8 mit Fehler nicht funktioniert: Die Typeigenschaft konnte nicht abgerufen werden
Code Novitiate
Fand diese Antwort bei einer Suche und es war eine große Hilfe. Meine Lösung bestand jedoch darin, diesen Scheck einfach aus jquery zu entfernen. Hat super funktioniert.
Michael
2
@ Michael, ich würde empfehlen, jQuery nicht direkt zu ändern. Abgesehen davon, dass es in Zukunft zu einer Konflikthaftung kommt, ist diese Prüfung wahrscheinlich aus einem bestimmten Grund vorhanden. Wenn Sie sich nicht um die IE-Unterstützung kümmern müssen, können Sie stattdessen eine jQuery-Erweiterung implementieren, die parallel ist, attraber das Ändern des typeAttributs für inputElemente ermöglicht.
Augenlidlosigkeit
1
Gerade Update 4 hinzugefügt - hoffe, es hilft, Dinge zu erklären und wie man sie umgeht.
ClarkeyBoy
76

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.

Joe
quelle
2
Sie können auch die folgenden Funktionen $('#password').show(); $('#password').focus();$('#password').show().focus();
verketten
Ich habe beide Felder wie folgt zusammen: <input type = "text" /> <input type = "password" /> und ich bekomme immer noch eine vertikale Verschiebung in IE (9), wenn sie vertauscht werden. Das Verketten der Methoden ($ ('# password'). Show (). Focus ();) hat dabei nicht geholfen, aber es war ein lustiger Optimierungsschritt. Insgesamt war dies die beste Lösung.
AVProgrammer
Wenn der Benutzer den Fokus auf ein anderes Steuerelement verschiebt und eine Unschärfe ausgelöst wird, kehrt der Fokus zum Feld für gefälschte Passwörter zurück
Allan Chua
Sie sollten verwenden: if ($ ('# password'). Val () == '') {anstatt: if ($ ('# password'). Attr ('value') == '') {Andernfalls die Der Passwortwert zeigt immer 'Passwort' an.
Stephen Paul
75

Ein-Schritt-Lösung

$('#password').get(0).type = 'text';
Sanket Sahu
quelle
5
document.getElementByIdsollte ausreichen und du brauchst jQuery dafür nicht! ;-)
Gandaro
2
Laut der Frage war es tatsächlich eine jQuery-Lösung.
Sanket Sahu
17
oder noch kürzer, $ ('# password') [0] .type = 'text';
Sanket Sahu
2
Dies kann Probleme mit IE9 verursachen. Der Typ ist undefiniert. Ideal für andere Browser.
Kravits88
1
IE 8 gibt tatsächlich einen Fehler aus, wenn Sie versuchen, den Typ auf diese Weise von "Passwort" in "Text" zu ändern. Der Fehler lautet "Die Eigenschaft type konnte nicht abgerufen werden. Dieser Befehl wird nicht unterstützt."
Allieferr
41

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.

Andrew
quelle
Eine jsFiddle-Demo vonplaceholder="Password" . Die HTML-Spezifikation und der MDN für das placeholderAttribut. Ein JavaScript-Shim fürplaceholder .
Rory O'Kane
1
IE 8 ist jetzt tot. Es lebe native HTML-Lösungen. Werfen Sie Ihre Platzhalter-Unterlegscheiben weg und feiern Sie.
Andrew
14

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;
    }
}
BMiner
quelle
Das ist einfach zu schade, wenn jeder F ... sagt, dann würde nichts funktionieren, es sollte browserübergreifend funktionieren oder überhaupt nicht.
Val
Apropos Kern ... Sie sollten einen für diesen Code erstellen. gist.github.com
Christopher Parker
8

Das funktioniert bei mir.

$('#password').replaceWith($('#password').clone().attr('type', 'text'));
stephenmuss
quelle
Vielen Dank! Dies löst die Probleme, die ich mit den anderen Antworten hatte, die im IE nicht funktionierten. Denken Sie daran, dass dies ein neues Objekt ist, sodass Sie es erneut aus dem DOM abrufen müssen, wenn Sie $ ('# password') in einer Variablen gespeichert haben.
Kravits88
1
Dies funktioniert in IE8 nicht. Sie erhalten weiterhin den Fehler "Typeneigenschaft kann nicht geändert werden".
Jcoffland
6

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

Ken Pega
quelle
5

Haben Sie versucht, .prop () zu verwenden?

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

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

Mark Mckelvie
quelle
Arbeitet in Cordova 6 Webview
Joel Caton
4

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?

Kapuze
quelle
3

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');
jantimon
quelle
3

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.

cjk84
quelle
3

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

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.

Jesse Kochis
quelle
2

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

Rhodium
quelle
2

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+'">');
}); 
Suresh Pattu
quelle
2

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')
Sedat Kilinc
quelle
2

Das hat bei mir funktioniert.

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

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" />
Farhan
quelle
1
$('#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'>
vankaiser
quelle
1
jQuery.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));
UnLoCo
quelle
1

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/

Joshcomley
quelle
1

Einfach das:

this.type = 'password';

sowie

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

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

Michael
quelle
1

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!

jb.
quelle
Vergessen Sie das - verwenden Sie einfach delete jQuery.attrHooks.type, um die spezielle Behandlung von Eingabetypen durch jQuery zu entfernen.
jb.
1

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.

Wie es aussieht

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

John Hascall
quelle
0

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();
     });
    }
  )});
guettli
quelle
Dies funktioniert in IE8 nicht. Sie erhalten weiterhin den Fehler "Typeneigenschaft kann nicht geändert werden".
Jcoffland
0

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;
chiliNUT
quelle
0

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

J_A_X
quelle
0

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
});
Sparky aka Tom
quelle
0

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

Pablo Alexis Domínguez Grau
quelle