Ändern Sie den Eingabetyp des HTML-Formulars durch JavaScript

Lesezeit: 4 Minuten

Benutzer-Avatar
Benutzer1150271

Wie kann ich dies über das Tag selbst tun?

Ändern Sie den Typ von Text in Passwort

<input type="text" name="pass" />

Ist es möglich, JavaScript-Code in die einzufügen Eingang sich selbst taggen, um type=”text” in type=”password” zu ändern?

Benutzer-Avatar
Urkunde02392

Versuchen:

<input id="hybrid" type="text" name="password" />

<script type="text/javascript">
    document.getElementById('hybrid').type="password";
</script>

  • Dies setzt voraus, dass Ihre Eingabe so aussieht <input id="myElement" type="text"/> Denken Sie also daran, ihm eine ID zuzuweisen

    – MMM

    1. Februar 2012 um 10:12 Uhr

  • Wie könnte dies innerhalb des -Tags selbst erfolgen, ohne Skript zu verwenden

    – Benutzer1150271

    1. Februar 2012 um 10:13 Uhr

  • Durch die Verwendung eines der Ereignisse, die ein Eingabefeld haben kann – onfocus, onclick usw. und das Einfügen von etwas wie this.type='password'.

    – Urkunde02392

    1. Februar 2012 um 10:23 Uhr

Benutzer-Avatar
Mathias Bynens

Wechseln type von einem <input type=password> wirft einen Sicherheitsfehler in einigen Browsern (alte IE- und Firefox-Versionen).

Sie müssen eine neue erstellen input Element, setze seine type zu der gewünschten und klonen Sie alle anderen Eigenschaften der vorhandenen.

Ich mache das in meinem jQuery-Platzhalter-Plugin: https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js#L80-84

So arbeiten Sie im Internet Explorer:

  • dynamisch ein neues Element erstellen
  • Kopieren Sie die Eigenschaften des alten Elements in das neue Element
  • Legen Sie den Typ des neuen Elements auf den neuen Typ fest
  • ersetzen Sie das alte Element durch das neue Element

Die folgende Funktion erledigt die oben genannten Aufgaben für Sie:

<script>
function changeInputType(oldObject, oType) {
    var newObject = document.createElement('input');
    newObject.type = oType;
    if(oldObject.size) newObject.size = oldObject.size;
    if(oldObject.value) newObject.value = oldObject.value;
    if(oldObject.name) newObject.name = oldObject.name;
    if(oldObject.id) newObject.id = oldObject.id;
    if(oldObject.className) newObject.className = oldObject.className;
    oldObject.parentNode.replaceChild(newObject,oldObject);
    return newObject;
}
</script>

  • Würde dies funktionieren, ohne alle if-Bedingungen zu verwenden? Ich habe das gleiche Problem, aber ich brauche die Objekte nicht, um einander gleich zu sein.

    – JP Hochbaum

    20. Mai 2016 um 20:06 Uhr

  • @JPHochbaum Sicher. Tatsächlich enthielt meine ursprüngliche Antwort nicht all diesen zusätzlichen Code – jemand anderes hat ihn hinzugefügt.

    – Mathias Bynens

    22. Mai 2016 um 14:44 Uhr

Benutzer-Avatar
Srinath

Ja, Sie können es sogar ändern, indem Sie ein Ereignis auslösen

<input type="text" name="pass"  onclick="(this.type="password")" />


<input type="text" placeholder="date" onfocusin="(this.type="date")" onfocusout="(this.type="text")">

  • super hilfe, weiter so

    – Rinku Choudhary

    28. Januar 2020 um 11:01 Uhr

  • Dies hat einen Fehler. Wenn Sie sich konzentrieren müssen Shift+Tab es löst aus onfocusin und onfocusout zur gleichen Zeit, wodurch es nicht auf die Eingabe konzentriert wird

    – Iglesias Leonardo

    28. März um 14:58 Uhr


Benutzer-Avatar
Lou Grossi

Hier ist, was ich für meine habe.

Im Wesentlichen verwenden Sie die im Fokus und unscharf Befehle im -Tag, um den entsprechenden JavaScript-Code auszulösen. Es könnte so einfach sein wie:

<span><input name="login_text_password" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="this.select(); this.setAttribute('type','text');" /></span>

Eine weiterentwickelte Version dieser Grundfunktionalität prüft auf eine leere Zeichenfolge und gibt die Passworteingabe im Falle eines leeren Textfelds wieder auf das ursprüngliche „Passwort“ zurück:

<script type="text/javascript">
    function password_set_attribute() {
        if (document.getElementsByName("login_text_password")[0].value.replace(/\s+/g, ' ') == "" ||
            document.getElementsByName[0].value == null) {

            document.getElementsByName("login_text_password")[0].setAttribute('type','text')
            document.getElementsByName("login_text_password")[0].value="Password";
        }
        else {
            document.getElementsByName("login_text_password")[0].setAttribute('type','password')
        }
    }
</script>

Wo HTML aussieht:

<span><input name="login_text_password" class="roundCorners" type="text" value="Password" onfocus="this.select(); this.setAttribute('type','password');" onblur="password_set_attribute();" /></span>

$(".show-pass").click(function (e) {
    e.preventDefault();
    var type = $("#signupform-password").attr('type');
    switch (type) {
        case 'password':
        {
            $("#signupform-password").attr('type', 'text');
            return;
        }
        case 'text':
        {
            $("#signupform-password").attr('type', 'password');
            return;
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="password" class="show-pass">

  • Dies zeigt nicht, wie man einen Typ mit Vanilla Javascript ändert, es ist ein jQuery-Ansatz. Das wird immer weniger relevant, da jQuery nicht viel für neue Projekte verwendet wird.

    – moopet

    3. Juni 2020 um 14:21 Uhr

Benutzer-Avatar
NimaDoustdar

let btn = document.querySelector('#btn');
let input = document.querySelector('#username');

btn.addEventListener('click',()=> {
    if ( input.type === "password") {
        input.type = "text"
    } else {
        input.type = "password"


    }
})
<input type="password" id="username" >

<button id="btn">change Attr</button>

  • Dies zeigt nicht, wie man einen Typ mit Vanilla Javascript ändert, es ist ein jQuery-Ansatz. Das wird immer weniger relevant, da jQuery nicht viel für neue Projekte verwendet wird.

    – moopet

    3. Juni 2020 um 14:21 Uhr

Benutzer-Avatar
Peter Mortensen

Ich musste am Ende von Everts Code ein ‘.value’ hinzufügen, damit es funktioniert.

Außerdem habe ich es mit einem Browser-Check kombiniert, damit die Eingang Typ = “Nummer” Feld geändert wird in Typ = “Text” in Chrome, da ‘formnovalidate’ momentan nicht zu funktionieren scheint.

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
    document.getElementById("input_id").attributes["type"].value = "text";

1017810cookie-checkÄndern Sie den Eingabetyp des HTML-Formulars durch JavaScript

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy