Zmień typ pola wejściowego za pomocą jQuery

One step solution

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

Jeszcze łatwiej... nie ma potrzeby tworzenia elementów dynamicznych. Wystarczy utworzyć dwa oddzielne pola, tworząc jedno pole "prawdziwe" hasło (type="password") i jedno pole"fałszywe" hasło (type= "text"), ustawiając tekst w fałszywym polu na jasnoszary kolor i ustawiając wartość początkową na "hasło". Następnie dodaj kilka linii Javascript z jQuery jak poniżej:

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

Więc gdy użytkownik wejdzie w pole "fałszywe" hasło będzie ukryte, prawdziwe pole zostanie wyświetlone, a fokus przeniesie się na prawdziwe pole. Nigdy nie będą w stanie wprowadzić tekstu w fałszywym polu.

Gdy użytkownik opuści prawdziwe pole hasła, skrypt sprawdzi, czy jest puste, a jeśli tak, ukryje prawdziwe pole i pokaże fałszywe.

Uważaj, aby nie pozostawić spacji między dwoma elementami wejściowymi, ponieważ IE pozycjonuje jeden kawałek po drugim (renderuje spację) i pole będzie się poruszać, gdy użytkownik wejdzie/wyjdzie z niego.

W dzisiejszych czasach możesz po prostu użyć

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

Ale oczywiście, naprawdę powinieneś to zrobić

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

We wszystkich poza IE. Istnieją podkładki zastępcze, które naśladują tę funkcjonalność również w IE.

Bardziej między przeglądarkowe rozwiązanie ... mam nadzieję, że sedno tego pomoże komuś tam.

To rozwiązanie próbuje ustawić atrybut type, a jeśli się nie powiedzie, po prostu tworzy nowy element <input>, zachowując atrybuty elementu i procedury obsługi zdarzeń.

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

To mi pasuje.

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

Ostateczny sposób użycia jQuery:

Pozostaw oryginalne pole wejściowe ukryte przed ekranem.

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

Utwórz nowe pole wprowadzania w locie za pomocą JavaScript.

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

Migracja ID i wartości z ukrytego pola wejściowego do nowego pola wejściowego.

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

Aby obejść błąd na IE jak type property cannot be changed, może się to okazać przydatne jako poniżej:

Załącz Zdarzenie click/focus/change do nowego elementu wejściowego, aby wywołać to samo zdarzenie w hidden wejście.

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

Stary ukryty element wejściowy jest nadal wewnątrz DOM, więc zareaguje ze zdarzeniem wyzwalanym przez nowy element wejściowy. Gdy ID jest zamieniane, nowy element wejściowy będzie działał jak stary i odpowie na każde wywołanie funkcji do ukrytego ID starego wejścia, ale wygląda inaczej.

Trochę trudne, ale działa!!! ;-)

Czy próbowałeś używać .prop ()?

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

Http://api.jquery.com/prop/

Nie testowałem w IE (ponieważ potrzebowałem tego na stronie iPada) - formularza nie mogłem zmienić HTML, ale mogłem dodać JS:

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

(Old school JS jest brzydki obok wszystkich jQuery!)

Ale, http://bugs.jquery.com/ticket/1957 Linki do MSDN: "od wersji Microsoft Internet Explorer 5 właściwość type jest odczytywana / zapisywana-raz, ale tylko wtedy, gdy element wejściowy jest tworzony za pomocą metody createElement i zanim zostanie dodany do dokumentu."więc może mógłbyś powielić element, zmienić typ, dodać do DOM i usunąć stary?

Po prostu utwórz nowe pole, aby ominąć to zabezpieczenie:

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

Otrzymałem ten sam komunikat o błędzie podczas próby zrobienia tego w Firefoksie 5.

Rozwiązałem to używając poniższego kodu:

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

I aby go użyć, po prostu ustaw atrybuty onFocus i onBlur swoich pól na coś takiego:

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

Używam tego również dla pola username, więc przełącza wartość domyślną. Po prostu ustaw drugi parametr funkcji na " po wywołaniu.

Warto również zauważyć, że domyślnym typem pola moje hasło jest właściwie hasło, na wypadek, gdyby użytkownik nie miał włączonej obsługi javascript lub jeśli coś pójdzie nie tak, w ten sposób jego hasło jest nadal chronione.

$(dokument).gotową funkcją jest jQuery i ładuje się po zakończeniu ładowania dokumentu. Spowoduje to zmianę pola hasła na pole tekstowe. Oczywiście będziesz musiał zmienić "password_field_id" na id pola hasła.

Możesz używać i modyfikować kod!

-- CJ Kent

Edytuj: Dobre rozwiązanie, ale nie absolutne. Działa na FF8 i IE8, ale nie w pełni Na Chrome(16.0.912.75 ver). Chrome nie wyświetla tekstu hasła podczas ładowania strony. Również-FF wyświetli Twoje hasło, gdy autouzupełnianie jest włączone.

Proste rozwiązanie dla wszystkich, którzy chcą mieć funkcjonalność we wszystkich przeglądarkach:

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

To mi pomogło.

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

Właściwości typu nie mogą być zmieniane musisz zastąpić lub nałożyć wejście na wejście tekstowe i wysłać wartość do wejścia hasła podczas przesyłania.

Myślę, że możesz użyć obrazka tła, który zawiera słowo "hasło" i zmienić go z powrotem na pusty obrazek tła na .focus().

.blur() ----> obrazek z "hasłem"

.focus() -----> obraz bez "hasła"

Możesz to zrobić również za pomocą CSS i jQuery. Pole tekstowe wyświetla się dokładnie na górze pola hasła, hide () jest włączone focus (), a focus na polu hasła...

Spróbuj tego
Demo jest tutaj

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

Z tym działa znacznie łatwiej:

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

I aby powrócić do pola password,(zakładając, że pole password jest drugim znacznikiem wejściowym z typem tekstu):

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

Użyj tego jest bardzo proste

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

To wystarczy. Chociaż można poprawić ignorowanie atrybutów, które są teraz nieistotne.

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

użycie:

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

Fiddle:

Http://jsfiddle.net/joshcomley/yX23U/

Po prostu to:

this.type = 'password';

Takie jak

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

Zakłada się, że Twoje pole wejściowe zostało ustawione na" text " przed ręką.

Oto mały fragment, który pozwala na zmianę type elementów w dokumentach.

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

Rozwiązuje problem, usuwając input z dokumentu, zmieniając type, a następnie umieszczając go z powrotem w miejscu, w którym był pierwotnie.

Zauważ, że ten fragment był testowany tylko dla przeglądarek WebKit-żadnych gwarancji na cokolwiek innego!

Oto metoda, która wykorzystuje obrazek obok pola hasła, aby przełączać się między wyświetlaniem hasła (wprowadzanie tekstu) a jego nie widzeniem (wprowadzanie hasła). Używam obrazu "otwarte oko" i "zamknięte oko" , ale możesz użyć tego, co Ci odpowiada. Sposób, w jaki to działa, to posiadanie dwóch wejść/obrazów i po kliknięciu obrazu, wartość jest kopiowana z widocznego wejścia do ukrytego, a następnie ich widoczność jest zamieniana. W przeciwieństwie do wielu innych odpowiedzi, które używają zakodowanych nazw, ta jest ogólna wystarczy użyć go wiele razy na stronie. Rozkłada się również wdzięcznie, jeśli JavaScript jest niedostępny.

Oto, jak dwa z nich wyglądają na stronie. W tym przykładzie hasło-A zostało ujawnione poprzez kliknięcie w jego oko.

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

Lubię ten sposób, aby zmienić typ elementu wejściowego: old_input.clone ().... Oto przykład. Istnieje pole wyboru "id_select_multiple". Jeśli to jest zmienione na "selected", elementy wejściowe o nazwie " foo " powinny zostać zmienione na pola wyboru. Jeśli zostanie odznaczona, powinny zostać ponownie przyciskami radiowymi.

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

Heres a DOM solution

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;

Stworzyłem rozszerzenie jQuery do przełączania między tekstem i hasłem. Działa w IE8 (prawdopodobnie 6 i 7, ale nie testowany) i nie straci wartości ani atrybutów:

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

Kolejna opcja dla wszystkich miłośników IE8 i działa idealnie w nowszych przeglądarkach. Możesz po prostu pokolorować tekst, aby pasował do tła wejścia. Jeśli masz jedno pole, zmieni to kolor na czarny po kliknięciu / skupieniu na polu. Nie użyłbym tego na publicznej stronie, ponieważ "myliłoby" większość ludzi, ale używam go w sekcji administracyjnej, gdzie tylko jedna osoba ma dostęp do haseł użytkowników.

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

-lub -

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

To, również potrzebne, zmieni się po opuszczeniu pola tekst wraca na kolor biały. Proste, proste, proste.

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

[Inna Opcja ] Teraz, jeśli masz kilka pól, które sprawdzasz, wszystkie z tym samym identyfikatorem, do którego go używam, Dodaj klasę "pass" do pól, w których chcesz ukryć tekst. Ustaw typ pól hasła na "tekst". W ten sposób tylko pola z klasą 'pass' zostaną zmienione.

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

Oto druga część tego. Spowoduje to zmianę tekstu z powrotem na biały po opuszczeniu pole.

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

Po prostu zrobiłem co następuje, Aby zmienić typ wejścia:

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

Musiałem to zrobić, ponieważ używałem jQuery UI datepickers ' w projekcie ASP NET Core 3.1 i nie działały poprawnie na przeglądarkach opartych na Chromium (patrz: https://stackoverflow.com/a/61296225/7420301).