ubah jenis bidang input dengan jQuery


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

Mengapa Anda ingin mengubahnya?
ChaosPandion

Saya ingin ada pengguna yang memasukkan teks 'Kata Sandi' di input sehingga pengguna tahu apa yang harus diisi (karena tidak ada label).
Richard Knop

Jawaban:


258

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

12
Harus saya katakan, ini adalah pengukuran keamanan paling tidak berguna yang pernah saya lihat. Tampaknya tidak ada banyak perbedaan antara cepat mengubah jenis bidang dan menggantinya dengan yang benar-benar baru. Sangat aneh ... toh, berhasil untuk saya. Terima kasih!

2
itu bukan model keamanan, saya dapat mengkonfirmasi bahwa itu tidak berfungsi di IE7, IE8 dengan kesalahan: Tidak bisa mendapatkan tipe properti
Kode Novitiate

Menemukan jawaban ini pada pencarian dan itu sangat membantu. Namun, solusi saya adalah menghapus cek itu dari jquery. Bekerja dengan baik.
Michael

2
@Michael, saya akan merekomendasikan untuk tidak mengubah jQuery secara langsung. Selain itu ia menciptakan pertikaian konflik di masa depan, cek itu mungkin ada karena suatu alasan. Jika Anda tidak perlu khawatir tentang dukungan IE, Anda bisa menerapkan ekstensi jQuery yang sejajar attrtetapi memungkinkan mengubah typeatribut pada inputelemen.
kelopak mata

1
Baru saja menambahkan pembaruan 4 - semoga membantu menjelaskan hal-hal dan cara menyiasatinya.
ClarkeyBoy

76

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.


2
Anda dapat $('#password').show(); $('#password').focus();$('#password').show().focus();
mengaitkan

Saya memiliki kedua bidang bersama-sama seperti ini: <input type = "text" /> <input type = "password" /> dan saya masih mendapatkan pergeseran vertikal di IE (9) ketika mereka bertukar. Merantai metode ($ ('# kata sandi'). Show (). Focus ();) tidak membantu dengan itu, tetapi itu adalah langkah optimasi yang menyenangkan. Secara keseluruhan ini adalah solusi terbaik.
AVProgrammer

jika pengguna memindahkan fokus ke kontrol lain dan onblur memecat fokus akan kembali ke bidang kata sandi palsu
Allan Chua

Anda harus menggunakan: if ($ ('# password'). Val () == '') {daripada: jika ($ ('# password'). Attr ('value') == '') {Jika tidak, nilai kata sandi akan selalu menampilkan 'kata sandi' pada blur.
Stephen Paul

75

Solusi satu langkah

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

5
document.getElementByIdharus cukup dan Anda tidak perlu jQuery untuk itu! ;-)
Gandaro

2
Sebenarnya, menurut pertanyaan, itu adalah solusi jQuery.
Sanket Sahu

17
atau bahkan lebih pendek, $ ('# kata sandi') [0] .type = 'teks';
Sanket Sahu

2
ini dapat menyebabkan masalah dengan IE9, tipe tidak terdefinisi. Bagus untuk peramban lain.
kravits88

1
IE 8 akan benar-benar membuat kesalahan jika Anda mencoba mengubah jenis dari "kata sandi" menjadi "teks" dengan cara ini. Kesalahan mengatakan "Tidak bisa mendapatkan properti tipe. Perintah ini tidak didukung."
allieferr

41

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.



1
IE 8 sudah mati sekarang. Solusi HTML asli yang berumur panjang. Buang shimmer Anda pergi dan rayakan.
Andrew

14

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

Itu terlalu buruk, jika semua orang mengatakan F ... itu, maka tidak ada yang berhasil, itu harus bekerja lintas browser atau tidak sama sekali.
Val

Berbicara tentang intisari ... Anda harus membuatnya untuk kode ini. gist.github.com
Christopher Parker

8

Ini bekerja untuk saya.

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

Terima kasih! Ini memecahkan masalah yang saya alami dengan jawaban lain yang tidak berfungsi di IE. Ingat saja ini adalah objek baru sehingga Anda harus mengambilnya kembali dari DOM jika Anda telah menyimpan $ ('# kata sandi') dalam sebuah variabel.
kravits88

1
Ini tidak berfungsi di IE8. Anda masih mendapatkan kesalahan "ketik properti tidak dapat diubah".
jcoffland

6

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



4

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?


3

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

3

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.


3

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

3

Ini Berhasil untuk saya.

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

2

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


2

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


2

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

2

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

1

gunakan yang ini sangat mudah

<input id="pw" onclick="document.getElementById('pw').type='password';
  document.getElementById('pw').value='';"
  name="password" type="text" value="Password" />

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

1
jQuery.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));

1

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/


1

Cukup ini:

this.type = 'password';

seperti

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

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


1

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!


Sebenarnya, lupakan itu - cukup gunakan delete jQuery.attrHooks.typeuntuk menghapus penanganan tipe input khusus jQuery.
jb.

1

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.

Bagaimana tampilannya

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


0

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

Ini tidak berfungsi di IE8. Anda masih mendapatkan kesalahan "ketik properti tidak dapat diubah".
jcoffland

0

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;

0

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


0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.