ubah jenis bidang input dengan jQuery

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

Ini seharusnya mengubah #passwordbidang input (dengan id="password") yang type passwordke bidang teks normal, dan kemudian mengisi teks "Kata Sandi".

Tapi itu tidak berhasil. Mengapa?

Ini formulirnya:

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

Sangat mungkin tindakan ini dicegah sebagai bagian dari model keamanan browser.

Sunting: memang, pengujian sekarang di Safari, saya mendapatkan kesalahan type property cannot be changed.

Sunting 2: yang tampaknya merupakan kesalahan langsung dari jQuery. Menggunakan kode DOM langsung berikut berfungsi dengan baik:

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

Sunting 3: Langsung dari sumber jQuery, ini tampaknya terkait dengan IE (dan dapat berupa bug atau bagian dari model keamanan mereka, tetapi jQuery tidak spesifik):

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

Lebih mudah ... tidak perlu untuk semua pembuatan elemen dinamis. Cukup buat dua bidang terpisah, buat satu bidang kata sandi 'nyata' (ketik = "kata sandi") dan satu bidang kata sandi 'palsu' (ketik = "teks"), atur teks dalam bidang palsu ke warna abu-abu terang dan mengatur nilai awal ke 'Kata Sandi'. Kemudian tambahkan beberapa baris Javascript dengan jQuery seperti di bawah ini:

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

Jadi ketika pengguna memasukkan bidang kata sandi 'palsu' itu akan disembunyikan, bidang nyata akan ditampilkan, dan fokus akan pindah ke bidang nyata. Mereka tidak akan pernah bisa memasukkan teks di bidang palsu.

Ketika pengguna meninggalkan bidang kata sandi asli, skrip akan melihat apakah itu kosong, dan jika demikian akan menyembunyikan bidang nyata dan menampilkan yang palsu.

Berhati-hatilah untuk tidak meninggalkan ruang di antara dua elemen input karena IE akan memposisikan sedikit demi sedikit (rendering spasi) dan bidang akan tampak bergerak ketika pengguna memasukkan / keluar.

Solusi satu langkah

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

Saat ini, Anda bisa menggunakannya

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

Tapi tentu saja, Anda harus melakukan ini

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

dalam semua kecuali IE. Ada shims tempat penampung di luar sana untuk meniru fungsi itu di IE juga.

Solusi lintas-peramban yang lebih ... Saya berharap inti dari ini membantu seseorang di luar sana.

Solusi ini mencoba mengatur typeatribut, dan jika gagal, itu hanya membuat yang baru<input> elemen , mempertahankan atribut elemen dan event handler.

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

Ini bekerja untuk saya.

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

Cara terbaik untuk menggunakan jQuery:

Biarkan bidang input asli tersembunyi dari layar.

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

Buat bidang input baru dengan cepat menggunakan JavaScript.

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

Bermigrasi ID dan nilai dari bidang input tersembunyi ke bidang input baru.

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

Untuk menyiasati kesalahan pada IE suka type property cannot be changed , Anda mungkin menemukan ini berguna sebagai berikut:

Lampirkan klik / fokus / ubah acara ke elemen input baru, untuk memicu acara yang sama pada input tersembunyi.

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

Elemen input tersembunyi lama masih di dalam DOM sehingga akan bereaksi dengan peristiwa yang dipicu oleh elemen input baru. Saat ID ditukar, elemen input baru akan bertindak seperti yang lama dan menanggapi panggilan fungsi apa pun ke ID input lama yang disembunyikan, tetapi terlihat berbeda.

Sedikit rumit tapi BEKERJA !!! ;-)

Sudahkah Anda mencoba menggunakan .prop ()?

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

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

Saya belum menguji di IE (karena saya membutuhkan ini untuk situs iPad) - bentuk saya tidak bisa mengubah HTML tapi saya bisa menambahkan JS:

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

(JS sekolah lama jelek di sebelah semua jQuery!)

Tetapi, http://bugs.jquery.com/ticket/1957 tautan ke MSDN: "Pada Microsoft Internet Explorer 5, properti tipe dibaca / ditulis-sekali, tetapi hanya ketika elemen input dibuat dengan metode createElement dan sebelum ditambahkan ke dokumen. " jadi mungkin Anda bisa menduplikasi elemen, mengubah tipenya, menambah DOM dan menghapus yang lama?

Buat saja bidang baru untuk memintas hal keamanan ini:

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

Saya menerima pesan kesalahan yang sama ketika mencoba melakukan ini di Firefox 5.

Saya memecahkannya menggunakan kode di bawah ini:

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

Dan untuk menggunakannya, cukup atur atribut onFocus dan onBlur bidang Anda menjadi seperti ini:

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

Saya menggunakan ini untuk bidang nama pengguna juga, sehingga ini mengubah nilai default. Cukup atur parameter kedua fungsi ke '' saat Anda memanggilnya.

Mungkin juga perlu dicatat bahwa jenis default dari kata sandi saya sebenarnya adalah kata sandi, kalau-kalau pengguna tidak mengaktifkan javascript atau jika terjadi kesalahan, dengan cara itu kata sandi mereka masih dilindungi.

Fungsi $ (dokumen) .ready adalah jQuery, dan dimuat ketika dokumen telah selesai dimuat. Ini kemudian mengubah bidang kata sandi menjadi bidang teks. Tentunya Anda harus mengubah 'password_field_id' menjadi id bidang kata sandi Anda.

Jangan ragu untuk menggunakan dan memodifikasi kode!

Semoga ini bisa membantu semua orang yang memiliki masalah yang sama yang saya lakukan :)

- CJ Kent

EDIT: Solusi bagus tapi tidak absolut. Bekerja pada FF8 dan IE8 TAPI tidak sepenuhnya di Chrome (16.0.912.75 ver). Chrome tidak menampilkan teks kata sandi saat halaman dibuka. Selain itu - FF akan menampilkan kata sandi Anda ketika pengisian otomatis diaktifkan.

Solusi sederhana untuk semua orang yang menginginkan fungsi di semua browser:

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

Ini Berhasil untuk saya.

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

Ketik properti tidak dapat diubah. Anda perlu mengganti atau overlay input dengan input teks dan mengirim nilai ke input kata sandi saat mengirim.

Saya kira Anda bisa menggunakan gambar latar belakang yang berisi kata "kata sandi" dan mengubahnya kembali menjadi gambar latar belakang kosong .focus().

.blur() ----> gambar dengan "kata sandi"

.focus() -----> gambar tanpa "kata sandi"

Anda juga bisa melakukannya dengan beberapa CSS dan jQuery. Munculkan bidang teks persis di atas bidang kata sandi, sembunyikan () ada di fokus () dan fokus pada bidang kata sandi ...

Coba
Demo ini ada di sini

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

Ini bekerja lebih mudah dengan itu:

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

dan untuk mengubahnya kembali ke bidang kata sandi lagi, ( dengan asumsi bidang kata sandi adalah tag input kedua dengan jenis teks ):

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

gunakan yang ini sangat mudah

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

Ini akan melakukan triknya. Meskipun bisa diperbaiki untuk mengabaikan atribut yang sekarang tidak relevan.

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

Pemakaian:

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

Biola:

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

Cukup ini:

this.type = 'password';

seperti

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

Ini dengan asumsi bahwa bidang input Anda disetel ke "teks" sebelumnya.

Ini adalah potongan kecil yang memungkinkan Anda mengubah typeelemen dalam dokumen.

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

Ini mengatasi masalah dengan menghapus inputdari dokumen, mengubah typedan kemudian mengembalikannya ke tempat semula.

Perhatikan bahwa cuplikan ini hanya diuji untuk browser WebKit - tidak ada jaminan apa pun!

Berikut adalah metode yang menggunakan gambar di sebelah bidang kata sandi untuk beralih antara melihat kata sandi (input teks) dan tidak melihatnya (input kata sandi). Saya menggunakan gambar "mata terbuka" dan "mata tertutup", tetapi Anda dapat menggunakan apa pun yang cocok untuk Anda. Cara kerjanya adalah memiliki dua input / gambar dan setelah mengklik gambar, nilainya disalin dari input yang terlihat ke yang tersembunyi, dan kemudian visibilitas mereka ditukar. Tidak seperti banyak jawaban lain yang menggunakan nama yang di-hardcode, jawaban ini cukup umum untuk menggunakannya berkali-kali pada halaman. Itu juga menurunkan anggun jika JavaScript tidak tersedia.

Berikut adalah apa yang terlihat seperti dua halaman ini. Dalam contoh ini, Kata Sandi-A telah diungkapkan dengan mengklik matanya.

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

Saya suka cara ini, untuk mengubah jenis elemen input: old_input.clone () .... Ini adalah contohnya. Ada kotak centang "id_select_multiple". Jika ini diubah menjadi "terpilih", elemen masukan dengan nama "foo" harus diubah untuk mencentang kotak. Jika tidak dicentang, mereka harus menjadi tombol radio lagi.

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

Inilah solusi 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;

Saya telah membuat ekstensi jQuery untuk beralih antara teks dan kata sandi. Bekerja di IE8 (mungkin 6 & 7 juga, tetapi tidak diuji) dan tidak akan kehilangan nilai atau atribut Anda:

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

Bekerja seperti pesona. Anda cukup menelepon $('#element').togglePassword();untuk beralih di antara keduanya atau memberikan opsi untuk 'memaksa' tindakan berdasarkan sesuatu yang lain (seperti kotak centang):$('#element').togglePassword($checkbox.prop('checked'));

Hanya opsi lain untuk semua pecinta IE8, dan itu berfungsi sempurna di browser yang lebih baru. Anda bisa mewarnai teks untuk mencocokkan latar belakang input. Jika Anda memiliki satu bidang, ini akan mengubah warna menjadi hitam saat Anda mengklik / fokus pada bidang tersebut. Saya tidak akan menggunakan ini di situs publik karena itu akan 'membingungkan' kebanyakan orang, tetapi saya menggunakannya di bagian ADMIN di mana hanya satu orang yang memiliki akses ke kata sandi pengguna.

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

-ATAU-

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

Ini, juga diperlukan, akan mengubah teks kembali menjadi putih ketika Anda meninggalkan bidang. Sederhana, sederhana, sederhana.

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

[Pilihan Lain] Sekarang, jika Anda memiliki beberapa bidang yang Anda periksa, semua dengan ID yang sama, seperti yang saya gunakan, tambahkan kelas 'lulus' ke bidang yang ingin Anda sembunyikan teks. Setel bidang kata sandi ketik ke 'teks'. Dengan cara ini, hanya bidang dengan kelas 'lulus' yang akan diubah.

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

Ini bagian kedua dari ini. Ini mengubah teks kembali menjadi putih setelah Anda meninggalkan bidang.

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

Saya baru saja melakukan hal berikut untuk mengubah jenis input:

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

dan itu berhasil.

Saya perlu melakukan ini karena saya menggunakan datepickers UI jQuery 'dalam proyek ASP NET Core 3.1 dan mereka tidak bekerja dengan baik pada browser berbasis Chromium (lihat: https://stackoverflow.com/a/61296225/7420301 ).