Изменение поля пароля для отправки текстовых сообщений с флажком с jQuery
Как я могу переключить поле пароля к тексту и паролю со снятием флажка проверки флажка?
7 ответов
это то, что вы ищете ??
<html>
<head>
<script>
function changeType()
{
document.myform.txt.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'text':'password';
}
</script>
</head>
<body>
<form name="myform">
<input type="text" name="txt" />
<input type="checkbox" name="option" value='1' onchange="changeType()" />
</form>
</body>
</html>
Воспользуйтесь событием onChange при установке флажка и затем переключите тип ввода на текст/пароль.
Пример:
<input type="checkbox" onchange="tick(this)" />
<input type="input" type="text" id="input" />
<script>
function tick(el) {
$('#input').attr('type',el.checked ? 'text' : 'password');
}
</script>
обновлено: живой пример здесь
изменение типа с $('#blahinput').attr('type','othertype') невозможно в IE, учитывая единственное в IE правило set-it-once для типового атрибута входных элементов.
необходимо удалить ввод текста и добавить ввод пароля, наоборот.
$(function(){
$("#show").click(function(){
if( $("#show:checked").length > 0 ){
var pswd = $("#txtpassword").val();
$("#txtpassword").attr("id","txtpassword2");
$("#txtpassword2").after( $("<input id='txtpassword' type='text'>") );
$("#txtpassword2").remove();
$("#txtpassword").val( pswd );
}
else{ // vice versa
var pswd = $("#txtpassword").val();
$("#txtpassword").attr("id","txtpassword2");
$("#txtpassword2").after( $("<input id='txtpassword' type='password'>") );
$("#txtpassword2").remove();
$("#txtpassword").val( pswd );
}
});
})
живой пример здесь
полагаю, вы можете позвонить
$('#inputField').attr('type','text');
и
$('#inputField').attr('type','password');
в зависимости от состояния флажка.
.Переключите событие фокусировки флажка и определите статус флажка и обновите поле как nesscarry
$box = $('input[name=checkboxName]');
$box.focus(function(){
if ($(this).is(':checked')) {
$('input[name=PasswordInput]').attr('type', 'password');
} else {
$('input[name=PasswordInput]').attr('type', 'text');
}
})
У меня в производстве следующее. Он клонирует новое поле с переключенным типом.
toggle_clear_password = function( fields ) {
// handles a list of fields, or just one of course
fields.each(function(){
var orig_field = $(this);
var new_field = $(document.createElement('input')).attr({
name: orig_field.attr('name'),
id: orig_field.attr('id'),
value: orig_field.val(),
type: (orig_field.attr('type') == 'text'? 'password' : 'text')
})
new_field.copyEvents(orig_field); // jquery 'copyEvents' plugin
orig_field.removeAttr('name'); // name clashes on a form cause funky submit-behaviour
orig_field.before(new_field);
orig_field.remove();
});
}
JQuery не позволяет просто взять атрибут типа и изменить его, по крайней мере, не в последний раз, когда я пытался.
.<html>
<head>
<script>
$(function(){
$("#changePass").click(function(){
if ($("#txttext").hasClass("hide")){
$("#txttext").val( $("#txtpass").val() ).removeClass("hide");
$("#txtpass").addClass("hide");
} else if ($("#txtpass").hasClass("hide")){
$("#txtpass").val( $("#txttext").val() ).removeClass("hide");
$("#txttext").addClass("hide");
}
});
});
</script>
<style>
.hide{display:none;}
</style>
</head>
<body>
<form id="myform">
<input type="text" id="txtpass" type='password'/>
<input class="hide" type="text" id="txttext" type='text'/>
<button id="changePass">change</button>
</form>
</body>
</html>