$(document).ready(function() {
// #login-box password field
$('#password').attr('type', 'text');
$('#password').val('Password');
});
Hal ini seharusnya untuk mengubah #password
field input (dengan id="password"
) itu adalah type
password
normal bidang teks, dan kemudian mengisi teks "Password".
Itu tidak bekerja, meskipun. Mengapa?
Berikut adalah form:
<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>
It's sangat mungkin tindakan ini dapat dicegah sebagai bagian dari browser's security model.
Edit: memang, pengujian sekarang di Safari, saya mendapatkan error jenis properti yang tidak dapat diubah
.
Edit 2: yang tampaknya menjadi kesalahan langsung dari jQuery. Menggunakan berikut lurus DOM kode bekerja dengan baik:
var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';
Edit 3: Langsung dari sumber jQuery, hal ini tampaknya berkaitan dengan IE (dan bisa jadi bug atau bagian dari model keamanan, tetapi jQuery isn't tertentu):
// 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";
Bahkan lebih mudah... ada's tidak ada kebutuhan untuk semua elemen dinamis penciptaan. Hanya membuat dua bidang yang terpisah, membuat salah satu 'nyata' bidang sandi (type="password") dan satu 'palsu' bidang sandi (type="text"), pengaturan teks di palsu lapangan untuk warna abu-abu terang dan menetapkan nilai awal untuk 'Kata'. 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 memasuki 'palsu' bidang sandi itu akan disembunyikan, real field yang akan ditampilkan, dan fokus akan pindah ke real lapangan. Mereka tidak akan pernah bisa untuk memasukkan teks dalam palsu lapangan.
Ketika pengguna meninggalkan real password lapangan script akan melihat jika itu's kosong, dan jika demikian akan menyembunyikan nyata di lapangan dan menunjukkan yang palsu.
Berhati-hati untuk tidak meninggalkan ruang di antara dua elemen input karena IE akan posisi satu setelah yang lain (render ruang) dan lapangan akan muncul untuk bergerak ketika pengguna masuk/keluar itu.
Saat ini, anda hanya dapat menggunakan
$("#password").prop("type", "text");
Tapi tentu saja, anda benar-benar harus lakukan ini
<input type="password" placeholder="Password" />
dalam semua tapi IE. Ada placeholder shims di luar sana untuk meniru fungsi itu di IE juga.
Lebih cross-browser solusi... saya harap inti dari hal ini membantu seseorang di luar sana.
Solusi ini mencoba untuk mengatur atribut type
, dan jika itu gagal, itu hanya menciptakan yang baru <input>
elemen, menjaga elemen atribut dan event handler.
changeTypeAttr.js
(Gist GitHub):
/* 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;
}
}
Cara utama untuk menggunakan jQuery:
Meninggalkan original masukan field hidden 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
Membuat input field on the fly dengan JavaScript.
var new_input = document.createElement("input");
Memindahkan ID dan nilai dari input field baru field input.
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 mendapatkan sekitar error pada IE seperti jenis properti yang tidak dapat diubah
, anda mungkin menemukan ini berguna sebagai di bawah ini:
Melampirkan klik/fokus/perubahan acara baru elemen input, dalam rangka untuk memicu acara yang sama pada hidden input.
$(new_input).click(function(){$("#Password_hidden").click();});
//Replicate above line for all other events like focus, change and so on...
Tua tersembunyi elemen input ini masih dalam DOM sehingga akan bereaksi dengan peristiwa yang dipicu oleh elemen input. Sebagai ID swap, baru masukan elemen akan bertindak seperti yang lama dan menanggapi setiap panggilan fungsi tua tersembunyi input's ID, tapi terlihat berbeda.
sedikit rumit tetapi BEKERJA!!! ;-)
Apakah anda mencoba menggunakan .prop()?
$("#password").prop('type','text');
Aku ingin't diuji di IE (karena saya membutuhkan ini untuk iPad site) - formulir I tidak't mengubah HTML tapi saya bisa menambahkan JS:
document.getElementById('phonenumber').type = 'tel';
(Old school JS jelek di samping semua jQuery!)
Tapi, http://bugs.jquery.com/ticket/1957 link ke MSDN: "Seperti Microsoft Internet Explorer 5, jenis properti membaca/menulis-sekali, tetapi hanya ketika sebuah elemen input ini dibuat dengan createElement metode dan sebelum itu akan ditambahkan ke dokumen." jadi mungkin anda bisa menduplikasi elemen, mengubah jenis, menambah DOM dan menghapus yang lama?
Solusi sederhana untuk semua orang yang ingin 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();
}
});
Hanya membuat field baru untuk mem-bypass keamanan ini hal:
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 untuk melakukan hal ini di Firefox 5.
Aku diselesaikan dengan 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, hanya mengatur onFocus dan onBlur atribut dari bidang anda untuk sesuatu seperti berikut:
<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 sebagai baik, sehingga matikan nilai default. Hanya mengatur parameter kedua dari fungsi untuk '' ketika anda menelepon itu.
Juga mungkin perlu dicatat bahwa tipe default password saya bidang ini sebenarnya password, hanya dalam kasus pengguna tidak't memiliki javascript diaktifkan atau jika sesuatu yang tidak beres, yang cara password mereka masih dilindungi.
$(Dokumen).siap fungsi jQuery, dan beban ketika dokumen telah selesai loading. Ini kemudian mengubah password field ke kolom teks. Jelas anda'll telah berubah 'password_field_id' untuk bidang sandi's id.
Merasa bebas untuk menggunakan dan memodifikasi kode!
Semoga ini bisa membantu semua orang yang memiliki masalah yang sama saya lakukan :)
-- CJ Kent
EDIT: Solusi yang baik tapi tidak mutlak. Bekerja pada pada FF8 dan IE8 TAPI tidak sepenuhnya di Chrome(16.0.912.75 ver). Chrome tidak menampilkan Password teks ketika beban halaman. Juga - FF akan menampilkan password anda ketika isiotomatis diaktifkan.
Coba ini
[Demo di sini][1]
$(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+'">');
});
Saya kira anda bisa menggunakan latar belakang-gambar yang berisi kata-kata "password" dan mengubahnya kembali ke kosong background-image on .focus()
.
.blur()
----> gambar dengan "password"
.focus()
-----> gambar dengan tidak ada "password"
Anda juga bisa melakukannya dengan beberapa CSS dan jQuery. Memiliki bidang teks muncul tepat di atas kolom password, hide() adalah pada focus() dan fokus pada bidang kata sandi...
Ia bekerja jauh lebih mudah dengan:
document.querySelector('input[type=password]').setAttribute('type', 'text');
dan dalam rangka untuk mengubahnya kembali ke bidang sandi lagi,(asumsi bidang sandi 2nd tag input dengan jenis teks):
document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password')
Ini akan melakukan trik. Meskipun hal ini bisa ditingkatkan 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);
Penggunaan:
$(":submit").changeType("checkbox");
Biola:
$('#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'>