zmień typ pola wejściowego za pomocą jQuery

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

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

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.

Jednoetapowe rozwiązanie

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

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.

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

To działa dla mnie.

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

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

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

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

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

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?

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

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.

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

To zadziałało dla mnie.

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

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.

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

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

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

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

$('#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 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/

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

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!

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.

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

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

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;

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

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

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