zmień typ pola wejściowego za pomocą jQuery

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

Ma to zmienić #passwordpole wejściowe (z id="password"), które jest type passwordna normalne pole tekstowe, a następnie wypełnić tekst „Hasło”.

Ale to nie działa. Czemu?

Oto formularz:

<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
źródło
Dlaczego chcesz to zmienić?
ChaosPandion
Chcę, aby użytkownik wprowadzał ognisty tekst „Hasło” na wejściu, aby użytkownicy wiedzieli, co wypełnić (ponieważ nie ma etykiety).
Richard Knop
1
Sprawdź to wideo: youtube.com/watch?v=5YeSqtB0kfE
Grijesh Chauhan

Odpowiedzi:

258

Jest bardzo prawdopodobne, że ta czynność zostanie uniemożliwiona w ramach modelu bezpieczeństwa przeglądarki.

Edycja: rzeczywiście, testując teraz w Safari, otrzymuję błąd type property cannot be changed .

Edycja 2: wydaje się, że jest to błąd prosto z jQuery. Użycie następującego prostego kodu DOM działa dobrze:

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

Edycja 3: Prosto ze źródła jQuery, wydaje się, że jest to związane z IE (i może to być błąd lub część ich modelu bezpieczeństwa, ale jQuery nie jest specyficzny):

// 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";
brak powiek
źródło
12
muszę powiedzieć, że jest to najbardziej bezużyteczny pomiar bezpieczeństwa, jaki kiedykolwiek widziałem. Wydaje się, że nie ma dużej różnicy między szybką zmianą rodzaju pola a zastąpieniem go całkowicie nowym. Bardzo dziwne ... w każdym razie działało dla mnie. Dzięki!
2
nie jest to model zabezpieczeń, mogę potwierdzić, że nie działa w IE7, IE8 z błędem: Nie można uzyskać właściwości type
Code Novitiate
Znalazłem tę odpowiedź podczas wyszukiwania i była to wielka pomoc. Jednak moim rozwiązaniem było po prostu usunięcie tego czeku z jquery. Działa świetnie.
Michael
2
@Michael, odradzałbym bezpośrednie modyfikowanie jQuery. Oprócz tego, że w przyszłości powstaje odpowiedzialność za konflikt, kontrola ta prawdopodobnie została wprowadzona z jakiegoś powodu. Jeśli nie musisz się martwić o obsługę IE, możesz zamiast tego wdrożyć rozszerzenie jQuery, które działa równolegle, attrale umożliwia zmianę typeatrybutu inputelementów.
powiek
1
Właśnie dodałem aktualizację 4 - mam nadzieję, że pomoże ci to wyjaśnić i jak sobie z nimi poradzić.
ClarkeyBoy,
76

Jeszcze łatwiej ... nie ma potrzeby tworzenia całego elementu dynamicznego. Wystarczy utworzyć dwa oddzielne pola, z których jedno będzie „prawdziwym” polem hasła (typ = „hasło”), a drugim „fałszywym” polem hasła (typ = „tekst”), ustawiając tekst w fałszywym polu na jasnoszary kolor i ustawienie wartości początkowej na „Hasło”. Następnie dodaj kilka wierszy Javascript za pomocą 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()" />

Kiedy użytkownik wejdzie w pole „fałszywego” hasła, zostanie ono ukryte, pokazane zostanie rzeczywiste pole, a fokus zostanie przeniesiony na prawdziwe pole. Nigdy nie będą mogli wpisać tekstu w fałszywym polu.

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

Uważaj, aby nie pozostawić spacji między dwoma elementami wejściowymi, ponieważ IE ustawi jeden po drugim (renderowanie spacji), a pole będzie się poruszać, gdy użytkownik wejdzie / wyjdzie z niego.

Joe
źródło
2
Możesz także $('#password').show(); $('#password').focus();$('#password').show().focus();
połączyć
Mam oba pola razem w ten sposób: <input type = "text" /> <input type = "password" /> i nadal dostaję przesunięcie pionowe w IE (9), kiedy się zamieniają. Łączenie metod ($ („# hasło”). Show (). Focus ();) nie pomogło w tym, ale było zabawnym posunięciem optymalizacyjnym. Ogólnie było to najlepsze rozwiązanie.
AVProgrammer
jeśli użytkownik przeniesie fokus na inną kontrolkę i zostanie uruchomiony onblur, fokus wróci do pola fałszywego hasła
Allan Chua
Powinieneś użyć: if ($ ('# hasło'). Val () == '') {zamiast: if ($ ('# hasło'). Attr ('wartość') == '') {W przeciwnym razie wartość hasła zawsze wyświetla „hasło” onblur.
Stephen Paul
75

Jednoetapowe rozwiązanie

$('#password').get(0).type = 'text';
Sanket Sahu
źródło
5
document.getElementByIdpowinno wystarczyć i nie potrzebujesz do tego jQuery! ;-)
Gandaro
2
W rzeczywistości, zgodnie z pytaniem, było to rozwiązanie jQuery.
Sanket Sahu
17
lub nawet krótszy, $ ('# hasło') [0] .type = 'text';
Sanket Sahu
2
może to powodować problemy z IE9, typ jest niezdefiniowany. Idealne dla innych przeglądarek.
kravits88
1
IE 8 wyrzuci błąd, jeśli spróbujesz w ten sposób zmienić typ z „hasła” na „tekst”. Błąd mówi „Nie można uzyskać właściwości type. To polecenie nie jest obsługiwane”.
allieferr
41

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

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

Ale oczywiście powinieneś to po prostu zrobić

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

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

Andrzej
źródło
1
IE 8 jest teraz martwy. Niech żyją natywne rozwiązania HTML. Wyrzuć swój symbol zastępczy i świętuj.
Andrew
14

Więcej rozwiązań dla różnych przeglądarek… Mam nadzieję, że sedno tego pomaga komuś tam.

To rozwiązanie próbuje ustawić typeatrybut, a jeśli się nie powiedzie, po prostu tworzy nowy<input> element, 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;
    }
}
BMiner
źródło
To po prostu zbyt złe, jeśli wszyscy powiedzą F ... to nic by nie działało, powinno działać w różnych przeglądarkach lub wcale.
Val
Mówiąc o gists ... powinieneś utworzyć taki dla tego kodu. gist.github.com
Christopher Parker
8

To działa dla mnie.

$('#password').replaceWith($('#password').clone().attr('type', 'text'));
stephenmuss
źródło
Dzięki! To rozwiązuje problemy z innymi odpowiedziami, które nie działają w IE. Pamiętaj tylko, że jest to nowy obiekt, więc będziesz musiał pobrać go z DOM, jeśli zapisałeś $ („# hasło”) w zmiennej.
kravits88
1
To nie działa w IE8. Nadal pojawia się błąd „właściwości typu nie można zmienić”.
jcoffland
6

Najlepszy sposób na użycie jQuery:


Pozostaw oryginalne pole wprowadzania ukryte na ekranie.

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

Przeprowadź migrację identyfikatora 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 w IE jak type property cannot be changed , może się to przydać jako poniżej:

Dołącz zdarzenie click / focus / change do nowego elementu wejściowego, aby wyzwolić to samo zdarzenie na ukrytym wejściu.

$(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 nadal znajduje się w DOM, więc zareaguje na zdarzenie wywołane przez nowy element wejściowy. Podczas zamiany ID nowy element wejściowy będzie działał jak stary i reaguje na każde wywołanie funkcji na identyfikator starego ukrytego wejścia, ale wygląda inaczej.

Trochę trudne, ale DZIAŁA !!! ;-)

Ken Pega
źródło
5

Próbowałeś użyć .prop ()?

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

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

Mark Mckelvie
źródło
Działa w webview Cordova 6
Joel Caton
4

Nie testowałem w IE (ponieważ potrzebowałem tego na stronie na 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 prowadzi do MSDN: „Począwszy od 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 zduplikujesz element, zmienisz typ, dodasz do DOM i usuniesz stary?

kaptur
źródło
3

Wystarczy utworzyć nowe pole, aby ominąć tę kwestię bezpieczeństwa:

var $oldPassword = $("#password");
var $newPassword = $("<input type='text' />")
                          .val($oldPassword.val())
                          .appendTo($oldPassword.parent());
$oldPassword.remove();
$newPassword.attr('id','password');
jantimon
źródło
3

Otrzymałem ten sam komunikat o błędzie podczas próby wykonania tego w przeglądarce Firefox 5.

Rozwiązałem go za pomocą 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>

Aby z niego skorzystać, wystarczy ustawić 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ż w polu nazwy użytkownika, więc przełącza wartość domyślną. Po prostu ustaw drugi parametr funkcji na „”, kiedy ją wywołujesz.

Warto również zauważyć, że domyślnym typem pola mojego hasła jest hasło, na wypadek, gdyby użytkownik nie włączył javascript lub jeśli coś pójdzie nie tak, jego hasło jest nadal chronione.

Funkcja $ (dokument) .ready to jQuery i ładuje się po zakończeniu ładowania dokumentu. To następnie zmienia pole hasła na pole tekstowe. Oczywiście będziesz musiał zmienić 'password_field_id' na identyfikator pola swojego hasła.

Zachęcamy do korzystania i modyfikowania kodu!

Mam nadzieję, że to pomoże wszystkim, którzy mieli ten sam problem, co ja :)

- CJ Kent

EDYCJA: Dobre rozwiązanie, ale nie absolutne. Działa na FF8 i IE8, ALE nie w pełni w Chrome (16.0.912.75 ver). Chrome nie wyświetla tekstu hasła podczas ładowania strony. Ponadto - FF wyświetli twoje hasło po włączeniu autouzupełniania.

cjk84
źródło
3

Proste rozwiązanie dla wszystkich, którzy chcą funkcjonalności 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();
    }
});
Hohner
źródło
3

To zadziałało dla mnie.

$('#newpassword_field').attr("type", 'text');
Ashhab
źródło
2

Właściwości typu nie można zmienić, należy zastąpić lub nałożyć dane wejściowe na tekst i przesłać wartość na hasło wprowadzone podczas wysyłania.

Jesse Kochis
źródło
2

Myślę, że możesz użyć obrazu tła zawierającego słowo „hasło” i zmienić go z powrotem na pusty obraz tła .focus().

.blur() ----> obraz z „hasłem”

.focus() -----> obraz bez „hasła”

Możesz to również zrobić za pomocą CSS i jQuery. Niech pole tekstowe pokaże się dokładnie nad polem hasła, hide () jest na focus () i skupi się na polu hasła ...

rod
źródło
2

Wypróbuj to
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+'">');
}); 
Suresh Pattu
źródło
2

Działa o wiele łatwiej:

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

i aby ponownie zmienić go w pole hasła ( zakładając, że pole hasła jest drugim znacznikiem wejściowym z typem tekstu ):

document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password')
Sedat Kilinc
źródło
1

użyj tego jest bardzo łatwe

<input id="pw" onclick="document.getElementById('pw').type='password';
  document.getElementById('pw').value='';"
  name="password" type="text" value="Password" />
Farhan
źródło
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
źródło
1
jQuery.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));
UnLoCo
źródło
1

To załatwi sprawę. Chociaż można to poprawić, ignorując atrybuty, które są obecnie nieistotne.

Podłącz:

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

Stosowanie:

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

Skrzypce:

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

joshcomley
źródło
1

Po prostu to:

this.type = 'password';

Jak na przykład

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

Zakłada się, że pole wejściowe zostało wcześniej ustawione na „tekst”.

Michael
źródło
1

Oto mały fragment, który pozwala zmieniać typeelementy 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;
    }
}

Obejście problemu polega na usunięciu inputz dokumentu, zmianietype a następnie umieszczając z powrotem w miejscu, w którym był pierwotnie.

Pamiętaj, że ten fragment kodu został przetestowany tylko dla przeglądarek WebKit - bez żadnych gwarancji!

jb.
źródło
Właściwie zapomnij o tym - po prostu użyj, delete jQuery.attrHooks.typeaby usunąć specjalną obsługę typów wejściowych przez jQuery.
jb.
1

Oto metoda, która wykorzystuje obraz obok pola hasła do przełączania między wyświetlaniem hasła (wprowadzanie tekstu) a niewidzeniem (wprowadzanie hasła). Używam obrazu „otwartego oka” i „zamkniętego oka”, ale możesz użyć tego, co ci odpowiada. Jego działanie polega na dwóch wejściach / obrazach 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ą nazw zakodowanych na stałe, ta jest na tyle ogólna, że ​​można jej użyć wiele razy na stronie. Psunie się również z gracją, 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 na jego oku.

Jak to wygląda

$(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
źródło
0

Podoba mi się w ten sposób, aby zmienić typ elementu wejściowego: old_input.clone () .... Oto przykład. Jest pole wyboru „id_select_multiple”. Jeśli zmieni się to na „wybrane”, elementy wejściowe o nazwie „foo” należy zmienić, aby zaznaczyć pola wyboru. Jeśli nie zostanie zaznaczona, powinny one ponownie stać się przyciskami opcji.

  $(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
źródło
To nie działa w IE8. Nadal pojawia się błąd „właściwości typu nie można zmienić”.
jcoffland
0

oto rozwiązanie 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;
chiliNUT
źródło
0

Utworzyłem rozszerzenie jQuery do przełączania między tekstem a hasłem. Działa w IE8 (prawdopodobnie również 6 i 7, ale nie przetestowano) 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);
        }
    });
};

Działa jak marzenie. Możesz po prostu zadzwonić, $('#element').togglePassword();aby przełączać się między nimi lub dać opcję „wymuszenia” akcji na podstawie czegoś innego (np. Pola wyboru):$('#element').togglePassword($checkbox.prop('checked'));

J_A_X
źródło
0

To kolejna opcja dla wszystkich miłośników IE8, która działa idealnie w nowszych przeglądarkach. Możesz po prostu pokolorować tekst, aby dopasować go do tła wejścia. Jeśli masz pojedyncze pole, zmienisz kolor na czarny po kliknięciu / skupieniu się na polu. Nie używałbym tego na stronie publicznej, ponieważ „myliłby” większość ludzi, ale używam go w sekcji ADMIN, w której 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 tekst z powrotem na biały, gdy opuścisz pole. Prosty, prosty, prosty.

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

[Inna opcja] Teraz, jeśli masz kilka pól, które sprawdzasz, wszystkie o tym samym identyfikatorze, jak ja go używam, dodaj klasę „pass” do pól, w których chcesz ukryć tekst. Ustaw wpisz hasło w polu „tekst”. W ten sposób zostaną zmienione tylko pola z klasą „pass”.

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

$("[id^=inp_]").blur(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#ffffff');
    }
    // rest of code
});
Sparky aka tom
źródło
0

Właśnie zmieniłem typ danych wejściowych:

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

i to działa.

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

Pablo Alexis Domínguez Grau
źródło